Setup and Customize Bootstrap styles in Next.js

Prerequisites

This tutorial assumes that you have the following:

Basic knowledge of Node.js
Node 12.22.0 or later installed on your machine,
Any code or text editor of your choice

To create a new NextJS project, type and run:

npx create-next-app@latest < Your APP's NAME >

Steps to follow:

Installing Bootstrap

Let's start by installing the required NPM packages.

npm install bootstrap react-bootstrap sass

Sass Support, for more information check this link.

Next.js allows you to import Sass using the extensions .scss and .sass. You can use Sass at the component level through CSS modules and the extension .module.scss or .module.sass.

Creating a Custom SCSS

Let us now create a custom scss file in the styles/scss directory, and name it < ANY-NAME-OF-YOUR-CHOICE >.scss. In this file, we need to import Bootstrap’s bootstrap.scss. For the sake of simplicity, let us override the default colour system provided by Bootstrap.

$primary-color: #64FF00;

@import '/node_modules/bootstrap/scss/bootstrap.scss';

Configuring Next Config

The best part about the newer versions of Next is that they provide built-in support for SASS / SCSS. All we need to tell Next is where our styles are stored by setting next.config.js and adding the following code snippet:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Importing Bootstrap

The final step is to import our custom Bootstrap into our project. Based on where we need to use the custom styles, we can import our global.scss. In this example, let us configure it to be used by the entire project.

In pages/_app.js file, we need to add the following code:

import 'styles/scss/< ANY-NAME-OF-YOUR-CHOICE >.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp