Generally what comes to mind when thinking about some content that would stay constant across all or multiple pages, is a navigation bar. It can also be a header, some branding, or a menu.
This is easy to do with the
_app.js component present in Next.js projects. If you created your project with
create-next-app, you would have this component too.
Creating a component that wraps around
<Component /> will get the job done.
Putting any component in the
pages folder will create a new page. This component will not be a separate page on its own. So, create a new folder named
components at the root of the project. Create a new file in it -
Writing a simple header like this:
and wrapping it around
<Component /> in
it should show up on all pages. Run the project:
npm run dev
Here is a CodeSandbox. I added some styles to
Layout.js and also some nav links. As you can see, the header (along with the newly added nav links or navbar) is shown on both pages.