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.

Play with code on codesandbox and open _app.js file

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.

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>

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.

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.

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

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.

--

--

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