How to Build Next.js and Reactstrap Admin Dashboard Project

Components from Bootstrap in your React application with Reactstrap

Code Road
8 min readMar 26, 2020
React Router
Photo by Ferenc Almasi on Unsplash

React, SSR (Server Side Rendering), and static exporting are several of the many advantages of Next.JS framework features. Already packed with handy tools and of course, the ultimate React built-in.

Next.JS recommended that starting the project could use many methods such as styled-jsx, CSS-in-JS, CSS module based or with tools like styled-components, material-ui, foundation or custom-made components, and many others.

Although the methods above are recommended for NextJS or React-based projects, it’s okay to use the old-school method in Traditional CSS-file-based styling (including CSS, SCSS, PostCSS, etc). And this is my walkthrough with using the traditional way in NextJS using SCSS. If you are not familiar with SCSS, you can see my other post about SCSS here and also here.

Reactstrap is a library that makes use of Bootstrap framework in React-based front-end projects. You can use any bootstrap library in your react component.

Of course, there are many React frameworks out there that you can try such as Material UI and others, but for this one, I am going to show you on to integrate Bootstrap into your admin dashboard.

--

--

Code Road

I write topics such as React/NextJS, Vue/NuxtJS, GraphQL, Laravel, TailwindCSS, Bootstrap, SEO, Headless CMS, Fullstack, and web development.