A few months back, we wrote a blog on how to add and customize Bootstrap in Nuxt.js. Today, we will learn how to set up Bootstrap in a Next.js project. We will also install react-bootstrap to use Bootstrap based React components.
Contents π
1. Installing Bootstrap π
Let us get started by installing the required NPM packages. We will install bootstrap and optionally react-bootstrap.
Since we are going to create custom SCSS files, we also need to install node-sass.
npm install bootstrap react-bootstrap
npm install node-sass --save-dev
2. Creating a Custom SCSS π
Let us now create a custom scss file in the styles/scss
directory, and name it global.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.
$theme-colors: (
'primary': #145bea,
'secondary': #833bec,
'success': #1ce1ac,
'info': #ff7d50,
'warning': #ffbe0b,
'danger': #ff007f,
'light': #c0ccda,
'dark': #001738,
);
@import '/node_modules/bootstrap/scss/bootstrap.scss';
3. Configuring Next Config π
The best part about the newer versions of Next is that they provide built-in SASS/SCSS support. All we need to tell Next is where our styles are stored by configuring the next.config.js
and adding the following piece of code:
const path = require('path')
module.exports = {
...
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
}
4. 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/global.scss' // added
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
We have done it. We have set up Bootstrap in our Next project.