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.

Creating header component

Creating header component - 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

Creating header component

“

Let's start with the header creation. We will create a header component which will be common for all routes. Since it is a common interface, we will use this component in the layout.js file. So let me create a component folder inside the src folder. Inside this folder, I will create a layout folder with header.jsx file in it. Now I will create a component inside header.jsx by saying const header, the arrow function, return, division, h1, inside I will say header, and I will export this component by writing export default header. Let's save this file and open the layout.js. Alright, I'll use the header component just before children by writing the header component. Let's save this file and go to the browser. Now you can see the header text before the home page of client application text. So we configured the header component. Now it's time to start implementing the header. First of all, I will rename the text of the h1 tag and style by writing class name is equal to text 3xl font semi…

Contents