Learning Next.js Basics

Sharing CSS styles on every page

Similar to how you can share elements on every page (globally), you can also share CSS globally.

This is useful when you have things like font families that you know will be used on every page.

To create global CSS, create a new folder in the project called styles, and within that folder create a file called global.css.

Now that you have that created, go into the global.css file and set up whatever CSS stylings you want to be shown on every page. Once you've done that, go into your _app.js file and import it at the top of the file.

If your file set up matches the one for this project, your code will look something like this:

import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return (
    <>
      <header>
        <h1>
        Learning Next.js Basics
      </h1>
      <h3>(how to get started on a Next.js project today)</h3>
      </header>
      <Component {...pageProps} />
    </>
  );
}

Now all of the styles you set up within the global.css file should be shown on every page.

Ready to learn about local CSS stylings? On to page 5!