Nextjs Reactstrap

Nextjs Reactstrap is an open-source Next.js boilerplate that generates a React dashboard web application using Bootstrap 4 components from Reactstrap.

What is Nextjs Reactstrap?

Nextjs Reactstrap is a free, open-source starter template for building dashboard web applications with the Next.js 9.2.1 framework. It pairs React 16.12.0 with Reactstrap 8.4.1, a library that wraps Bootstrap 4 UI components in React, and includes Redux for state management. The template is authored by Defrian Yarfi, released under the Unlicense, and published on GitHub. Running on Node.js with Yarn, the project contains 32 directories and 114 files, including a complete pages/ folder with routes for dashboard, tables, forms, cards, carousels, login, profile, settings, typography, and documentation.

Key Features

• Next.js 9 framework — Uses Next.js 9.2.1 with React 16.12.0, giving server-side rendering, static exporting, and file-based routing out of the box.
• Reactstrap Bootstrap 4 integration — Includes Reactstrap 8.4.1 to render Bootstrap 4 components as React components, avoiding manual HTML and jQuery dependencies.
• Redux state management — Bundles Redux 4, react-redux 7.2, and next-redux-wrapper 5, with a store/ directory containing a root reducer and layout reducer.
• SCSS theming system — Uses @zeit/next-sass and node-sass to compile an assets/scss structure with base, components, themes, and vendors folders; the vendor file imports Bootstrap SCSS and Font Awesome 5.
• Font Awesome 5 bundled — Ships webfonts for brand, regular, and solid icon styles in public/webfonts, ready to use in the UI.
• PostCSS minification — Configures cssnano to remove all comments and autoprefixer to add vendor prefixes for browsers like Chrome 35+, Firefox 38+, Edge 10+, and iOS 8+.
• Layout components — Provides MainLayout, SingleLayout, and ErrorLayout wrappers, plus a navbar, left navigation, footer, and default head component.
• Developer tooling — Adds redux-devtools-extension for debugging Redux state in the browser and Prettier for consistent code formatting.

Who is it for?

Front-end developers who want a ready-made Next.js project structure instead of configuring Webpack, Babel, and Sass from scratch. React developers learning how to integrate Redux with server-side rendering using next-redux-wrapper. Teams that need a Bootstrap 4 dashboard UI in React and prefer prebuilt components over writing CSS classes manually. Anyone who wants a working demo to study, since a live example is hosted at https://nextjs-reactstrap.now.sh/.

What can you do with it?

• Kickstart a dashboard project: run yarn create next-app, name the project, add the provided dependencies, and get a dashboard that runs on http://localhost:3001 with yarn dev.
• Study React + Redux patterns: inspect the store/ folder, container/page pairs in components/container, and _app.jsx to see how Next.js wraps Redux state.
• Customize the Bootstrap theme: edit assets/scss/vendors/vendor.scss to import Bootstrap SCSS and Font Awesome, then override variables in assets/scss/vendors/_variables.scss.
• Build pages quickly: reuse the existing login, profile, table, form, card, and carousel pages as starting points for admin panels or internal tools.

How does it work?

Start by running yarn create next-app and entering a project name, then install the runtime dependencies from the README (including bootstrap, reactstrap, redux, react-redux, next-redux-wrapper, @zeit/next-sass, node-sass, cssnano, and @fortawesome/fontawesome-free). Add the provided next.config.js to enable Sass and postcss.config.js for cssnano and autoprefixer. Finally, import assets/scss/main.scss in _app.jsx and run yarn dev to open the dashboard on port 3001.

FAQ

What is Nextjs Reactstrap?

Nextjs Reactstrap is a GitHub-hosted boilerplate that combines the Next.js React framework, Reactstrap Bootstrap 4 components, and Redux to create a dashboard web application. It includes prebuilt pages, SCSS theming, Font Awesome icons, and a documented setup process.

How do I start the development server?

After installing dependencies and adding the configuration files, run yarn dev from the project root. The server starts on port 3001, and you can view the application at http://localhost:3001 in your browser.

What styling approach does the template use?

The project uses SCSS through @zeit/next-sass and node-sass. The main stylesheet in assets/scss/main.scss imports vendor libraries such as Bootstrap SCSS and Font Awesome, along with custom base, theme, component, placeholder, and utility files.

Is the template free to use?

Yes, the project is licensed under the Unlicense, which places it in the public domain. You can freely use, modify, and distribute it without restrictions.

What pages are included?

Out of the box the template includes pages for a dashboard, employee and post cards, carousels, buttons, forms, tables, login, profile, settings, typography, and documentation. Each page has a container and a page component under components/container.