Setting up NextJS with Bootstrap in 2023

NextJS is a popular React framework that makes building server-side rendered and statically generated websites a breeze. Bootstrap, on the other hand, is a widely used CSS framework for creating responsive and mobile-first websites. In this article, we will guide you on how to set up NextJS with Bootstrap to create modern and visually appealing web applications.

Step 1: Create a new NextJS project

If you haven’t already installed NextJS, you can do so by running the following command in your terminal:

npx create-next-app my-nextjs-app

Step 2: Install Bootstrap

Next, you will need to install Bootstrap into your NextJS project. Run the following command in your terminal:

npm install bootstrap

Step 3: Import Bootstrap styles

In your NextJS project, create a new file called styles/globals.css. Inside this file, import Bootstrap’s styles by adding the following line:

@import 'bootstrap/dist/css/bootstrap.min.css';

Step 4: Use Bootstrap components in your NextJS pages

Now that Bootstrap is set up in your NextJS project, you can start using its components in your pages. For example, you can create a new page called index.js and use Bootstrap’s grid system to create a responsive layout:


import 'styles/globals.css';

export default Home;


Step 5: Start your NextJS project

Finally, you can start your NextJS project by running the following command in your terminal:

npm run dev

And there you have it! You have successfully set up NextJS with Bootstrap in 2023. You can now start building modern and visually appealing web applications with ease.