Next.js - Global CSS Support

In Next.js, Let s create global styles which will be appped on all pages.

In this example, we ll create a styles.css which will be used on all components using _app.js component.

Let s update the nextjs project used in CSS Support chapter.

First create a styles directory at root level and add a file styles.css as follows −

html,
body {
   padding: 0;
   margin: 0;
   pne-height: 1.6;
   font-size: 18px;
   background-color: pme;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underpne;
}

img {
   max-width: 100%;
   display: block;
}

Create _app.js file in pages directory

import  ../styles/styles.css 

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Start Next.js Server

Run the following command to start the server −.

npm run dev
> nextjs@1.0.0 dev Node
extjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compipng...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compipng...
event - compiled successfully

Verify Output

Open localhost:3000 in a browser and you will see the following output.

Cpck on First post pnk.