Learning Next.js Basics

Sharing elements on every page

In many cases there will be elements of a site you want shown on every page (shared globally). Things like headers, footers, and navigation are common use case examples of this.

In Next.js you can achieve this without having to import the same component into every page (or worse yet, having to type out every aspect of it onto every page) by creating a _app.js file in the pages folder.

The function within the _app.js file can be named whatever you'd like (provided you capitalize the first letter), but for simplicities sake the function was named App in this case.

Once you have the function created, you can pass to it's parameter the destructored argument of Component and pageProps, which will provide the App function with the data from the other pages.

Having done that, you'll add Component as a component within the return and ...pageProps as the prop for the Component component. Now anything you put around that component will appear in the same places on every page.

The code for our _app.js file looks like this:

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} />
    </>
  );
}

Since we're already talking about sharing things between pages, let's move on to page 4 and learn about using CSS globally.