External Styles in Next.js

In this tutorial, you will learn, how to use external CSS in Next.js

You can use external CSS from CDNs, third-party libraries, and external files. There are many methods to add external CSS.

Method 1: Add CDN in app/layout.js

You will add Bootstrap into the Layout.

Example:


export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Method 2: Import external CSS in a component

This method will show, how to import external CSS in a component.

Example:


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

export default function Home() {
  return <button className="btn btn-primary">Bootstrap Button</button>;
}

Method 3: Using SCSS/SASS

In this method, you will learn, how to use SCSS/SASS

Install SASS:


npm install sass

Example:


styles/global.scss

When to use External Styles?

There are many options to use External Styles

1. When we use a third-party library, we use External Styles.

2. When we use a UI framework, we use External Styles.