How to add a stylesheet in Next.js?

NextJS Javascript Library Web Development

We can add a stylesheet in Next.js by creating a CSS file in the "pages" directory and importing it in the desired component. We can also use CSS-in-JS libraries like styled-jsx for styling in Next.js. It is important to note that the styles will only be scoped to the component they are imported in and will not affect the global styles.

Let us first learn what Next.js is. Next.js is an open-source web development framework. The Next.js is React Based framework with server side rendering capability. Both speed and SEO are excellent. You can simply build and test sophisticated react-based applications using Next.js.

Next.js is written in Typescripts. It offers a Link component that links other components together and has a prefetch property that allows for background prefetching of page resources. It enables dynamic import of React Components and JavaScript modules. Additionally enables you to export your web application's entire static site.

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.

To get started first create a new NextJS app and run it on our dev server like this −

npx create-next-app my-app
cd my-app
npm start

Approach

Create a new folder in the root of your Next.js project called "styles".
Inside the styles folder, create a new file called "global.css". This file will contain your global styles that will be applied to all pages on your website.
In your "pages" folder, create a new file called "_app.js". This file will be used to wrap all pages in your application and is where you will import your global styles.
In the _app.js file, import the global.css file using the following code −

import "../styles/global.css";

In the _app.js file, wrap the <Component {...pageProps} /> in the <Head> component to include the stylesheet −

<Head>
   <link rel="stylesheet" href="/styles/global.css" />
</Head>

In the _app.js file, wrap the <Component {...pageProps} /> in the <Head> component to include the stylesheet −

<Head>
   <link rel="stylesheet" href="/styles/global.css" />
</Head>

Save the changes to your _app.js file and your global styles will now be applied to all pages on your website.

Note −If you want to add a stylesheet for a specific page, you can import it in that specific page's JS file, and then wrap the imported stylesheet in a <style> tag.

Example

global.css

body {
   background-color: #f0f0f0;
   font-family: Arial, sans-serif;
}
h1 {
   color: #333;
   text-align: center;
}

_app.js

import Head from "next/head";
function MyApp({ Component, pageProps }) {
   return (
      <>
         <Head>
            <link rel="stylesheet" href="/styles/global.css" />
         </Head>
         <Component {...pageProps} />
      </>
   );
}
export default MyApp;

AmitDiwan

Updated on: 13-Feb-2023

9K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started