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 home page

Creating home page - 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 home page

“

In this lecture, we will create a home page component. So I will create a screens directory. Inside it, I will create a home folder and we'll add an index.jsx file. Here I'll say const home screen will return div home and let's also export the component. Now I will navigate to page jsx file and will use this component by saying home screen. Alright, it will automatically import this component as well. Now let's save the code and check the output once. Alright, so the text of home screen component is rendered. Now I will go to the home screen component and let me add style to the div by applying margin 10 on y axis. Then I will add the title. So h1 class name is equal to text hyphen 3 Excel and font semi bold. And the title is products. Now I want to make two sections, one for filters and second for the products listing. So I will make a container by applying styles, margin 5 on y-axis, display grid, grid calls 4 and gap will be 5. Then let me also add the division for filter section…

Contents