”;
In Next.js, Let”s create global styles which will be applied 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; line-height: 1.6; font-size: 18px; background-color: lime; } * { box-sizing: border-box; } a { color: #0070f3; text-decoration: none; } a:hover { text-decoration: underline; } 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 > [email protected] dev Nodenextjs > next ready - started server on http://localhost:3000 event - compiled successfully event - build page: / wait - compiling... event - compiled successfully event - build page: /next/dist/pages/_error wait - compiling... event - compiled successfully
Verify Output
Open localhost:3000 in a browser and you will see the following output.
Click on First post link.
Advertisements
”;