How to add vanilla bootstrap to nextjs

I was recently setting up a project in nextjs , and had the same question How to add vanilla bootstrap to nextjs?. On searching above question on google , i got blogs and documentation on How to add react-bootstrap to nextjs?. Although adding vanilla bootstrap to the nextjs project is very easy , but its easy only when you know it . And being a newbie to nextjs i had to struggle a bit , so i thought of writing a blog and explain you the steps.

Step 1: Add bootstrap package in your project , using

npm install bootstrap@next

Once , you install bootstrap , it would be seen in your package.json file under dependencies. And all the files related to bootstrap would be present in node_modules folder.

Step 2: As bootstrap is used by both components and pages , bootstrap should be added to pages/_app.js file

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

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Once it is added to the pages/_app.js file , the bootstrap classes can be accessed from components and pages folder.