Nextjs
Published in

Nextjs

How to use Bootstrap 5 with CDN in Nextjs By Rajdeep Singh
CopyRight By Bootstrap

How to use Bootstrap 5 with CDN in Nextjs?

Bootstrap 5 is the leading CSS framework. You add Bootstrap 5 in nextjs with copy-paste code.

Bootstrap is a highly used framework everywhere. Many frameworks or libraries use bootstrap to build the frontend on websites.

Another hand, nextjs is the popular framework in the javascript or reactjs world. In 2020 lots of company shift reactjs to nextjs. nextjs provide lots of functionality out of the box with configuration for the developer. That reason a lot of new companies use nextjs.

Demo

Play with code on codesandbox and open _app.js file

How to use Bootstrap 5 CDN in nextjs?

Start with bootstrap five on nextjs with copy-paste code. Then follow three-step to use bootstrap 5 CDN in next.js.

  1. Copy Bootstrap 5 CDN Links
  2. Create Next.js Custom _app.js file
  3. Paste code in the custom _app.js file.

Read a full detailed article on bootstrap with nextjs.

Copy Bootstrap 5 CDN Links

Firstly, go to the official Bootstrap website and copy bootstrap CSS and javascript links. Make use; you are copy comprised a version of CSS and js file CDN Links.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Create Nextjs Custom _app.js file

Last, in the second step, you create a custom _app.js file in nextjs. If already present in the nextjs pages folder, skip this part of the article.

Paste code in custom _app.js file

Firstly import Head and Script components in the nextjs _app.js file. Head component help to add CSS and another resource in the HTML head tag. Script component help add a third-party and custom script in nextjs.

import Script from "next/script";
import Head from "next/head";

Paste bootstrap CSS code inside Head command and replace bootstrap javascript CDN script file link with nextjs Script component.

import Script from "next/script";
import Head from "next/head";

import "../global.css";
export default function MyApp({ Component, pageProps }) {return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossOrigin="anonymous"
/>
</Head>
<Script
id="bootstrap-cdn"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" />
<Component {...pageProps} /></> );
}

Now the successfully bootstrap 5 adds to your website. Now you start using the bootstrap class in your project.

Note

Add / last of HTML link tag otherwise;, you face a little opening tag error in nextjs.

<link / > 

Read More About Script component.

https://medium.com/nextjs/the-script-component-in-next-js-ee6ee6cd705a

Conclusion

I hope you understand the article point. I'm pleased. Now you have added bootstrap 5 latest versions in nextjs. I recommended you use bootstrap with npm or custom or private CDN for your project. Bootstrap CDN Links help to step bootstrap environment easily in nextjs.

If you have any queries or find my help, don't hesitate to contact me at officialrajdeepsingh@gmail.com. Are you migrate react to nextjs, then you also contact me.

Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.

Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.

--

--

--

Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

Fast Next JS Templates List : As per Lighthouse Score

NextVita: 100% Lighhouse Score

JavaScript as a Girlfriend

JS Objects

How to Use Google Cloud Firestore With Glitch

10 javascript Topic For new Javascript learner

Managing your Angular style budgets

10 interesting JavaScript things !!

React Native Modal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

How to add Google AdSense in your Nextjs?

How to add Google AdSense in your Nextjs By Rajdeep Singh

Adding Metamask authentication in Next.js application using the thirdweb

Build Instagram login page with Next.js and TailwindCSS (all articles)

Protected Route (/username) in React/NextJS — Part 2