Jan 25, 2021
Next.js
How to add Bootstrap 5 in Next.js (13)
Learn Next.js, simply and easily #SeriesPart 4
Create the next app
Firstly, create d new react app and use npm, yarn, and npx according to your choice.
If you have already begun a react app, then skip this part
npx create-next-app
# or
yarn create next-appLet's start it:
Steps:
- The first method (Recommended)
- Second method
Demo:
The first method (Recommended)
The first method you install, bootstrap 5, uses npm, npx, and yarn in your next js.
Install Bootstrap 5:
npm install bootstrap
or
yarn add bootstrapImport styles from node_modules:
After installation is complete, import the bootstrap CSS file into the next js custom pages/_app.js.
Note:
The custom app components are always rendered on every page. So that your bootstrap CSS file is available for every page.
// add bootstrap css
import 'bootstrap/dist/css/bootstrap.css'// own css files here
import "../css/customcss.css";export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
After import, the bootstrap file now adds a bootstrap responsive meta tag in your custom app. add a meta tag in next.js. You import the Head component in nextjs. Paste the meta tag inside the head, opening, and closing.
import Head from "next/head";
import "../css/customcss.css";function MyApp({ Component, pageProps }) {return (<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head><Component {...pageProps} /></>
);
}export default MyApp;
Second Method:
In the second method, you Add bootstrap five with the help of CDN. CDN is a content delivery network (CDN) that quickly provides all bootstrap code to other hosts and your web.
Copy bootstrap CDN file:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Copy the Bootstrap CDN file on bootstrap official docs. In My case, I'm using bootstrap compiled CSS and JS Files for my project.
Paste CDN links in next.js custom pages/_app.js:
You copy the bootstrap CDN file and paste CDN links into the next js custom pages/_app.js app. In the Custom app, firstly, import the Head component in next.js. After the Head component, you paste CDN links inside the head component opening and closing tag.
The Head component is built by next js to append elements into the HTML head tag.
Third Method
Third method is similar to second method. In third method you can paste CDN link in _document.js . If _document.js file does not exit in your project firstly create _document.js file then paste following code into file.
Read My Other Article on Next.js
Conclusion
All three method work properly with nextjs 13. you can use according to your requirement.
