From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Adding global interface

Adding global interface - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Adding global interface

“

Now, let's see how to add a global interface. Adding a global interface, that's interface that is rendered irrespective of the routes, is actually very easy and similar to what we have done in app router. In the app router, we used to have the interface code in the layout.js file. Similarly, in pages router, we need to put the code in the document.js file, which is a top level file in page router application. So practically try it. In the document.js, I'll put h1 with the text. This is the global interface. Let's save this and check the output. So we get the h1 on the home page and if I check the slash products route, then it is rendered over here too. So this should be pretty clear. Now let's try another thing. We'll create a component that has links to navigate through the routes. So let's start with component creation. I'll create a components folder in the src. Now let's create the component file, header.js and creating the function, export default function header, will return the…

Contents