Creating your first pages in NextJS Project
Now let's create our first page using Next.js. First of all, we can ignore this _app.js file and delete the API folder. Also, from the styles folder, we can delete the home.module.css file. Now let's look into the index.js file from the pages folder. In this file, there is only a standard React component. But to make this easier, we will delete this index.js file and keep only the _app.js file. So, to get started, we will be creating three pages - a simple website with a homepage, a news list page, and a news details page. To create a structure for these pages in Next.js, we will need to create three files in the pages folder. The index.js file will be the root page, which will be reached when an API request is done to our domain slash nothing. Next, we will have a news.js file that will be reached when a request reaches our domain slash news. The file name will be used as a path, as we mentioned when we discussed file-based routing. For now, we will have only these two pages. And what goes into these files? It's a standard React component. Let's start with the homepage. We will create a component the same way we would for a React application, and we will be using functional components. We will name it Homepage, and don't forget to export the component so that Next.js can find it. In this homepage function, you will return JSX code, just as you would do in React. For example, we will return an h1 tag saying "The home page." Of course, we will add more code to this component later on. Let's also create a simple component for the news page. You may be wondering why you do not see any "import React from 'react'" as you would in a standard React app. That's because Next.js projects have the modern React setup, where you can omit this import and it is added behind the scenes.
Now, we have some dummy components. Let's start the development server using "npm run dev," and when opening "localhost:3000," we can see our homepage. If we add "/news" after "localhost:3000," we can see the new page.
If we inspect the source code, we do not have just an empty skeleton, but we have the actual page content. This is an important difference from a standard React app. The code that we are seeing here is the code sent by the server, and since it is shown, this means that the page is prerendered. And because of that, we do not have flickering while waiting for the page. Another advantage is that search engines will also see this content.
And this is how we can start using file-based routing. As we can see from looking at the source code, we are using the built-in server-side rendering without any additional setup.
In the next video, we will dig a little bit deeper and see what else we can do here. Thank you for watching! Hit the like and subscribe button if you like my content.
Watch video Creating your first pages in NextJS Project online without registration, duration hours minute second in high quality. This video was added by user ReactJS tutorials 22 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 130 once and liked it 5 people.