Add static routes to a Next.js app
One of the most powerful features of Next.js is the file-system-based-routing. In order to create new pages for our app we don't have to define them anywhere in the code - we just need to create a new component in pages directory.
In this lesson we're going to learn how to add static routes to a Next.js app.
Tomasz Łakomy: [0:00] Next.js, I'll just to create multiple pages in the pages directory. Each page is associated with a route-based on its file name. For instance, if I were to go ahead and create a new file, and I'm going to call it about.tsx, and inside of it, I'm going to export default function About( ). I'm going to return some JSX.
[0:20] I'm going to return a div with a header, "About this blog," and a paragraph saying that, "This is the best blog ever." If I save that, I can go to our site and go to localhost:3000/about. This is going to show the contents of the About component.
[0:36] If I were to change the filename from about to about-me, if I go back and refresh this page, we're going to see a 404. If I change it over here to about-me, this is going to work fine. In Next,js routes are based on the file system.
[0:52] Another example if I were to create a directory called about and change the file name to me, if I copy this file to the about directory, move it over here. Now, I have pages, /about, /me. I will have to put in about/me in order to get to this page.
[1:12] I'm going to move this about page back to the main pages directory. This is quite powerful in Next.js because in order to create some new pages, we don't have to specify them anywhere in the code. We just have to create a component with a proper file name. Off we go, the routes are created for us.
[1:29] If we need another page, I can just create a new one, hello.tsx, paste in some JSX. This is going to render a header of, "Hello there!" If I go back to our app under /hello, we have this text, "Hello there!"
[1:42] One important thing to mention is that those pages are just React components. In this example, I have created a components directory. Inside of it, we have an Article. Article is just a styled.article with some styling. I'm going to use that inside of both hello.tsx and about.tsx components.
[2:02] Let me go over here and import { Article } from ". . /components/Article." I'm going to replace this div with an Article. I do exactly the same for the about component. Let me go over here, copy that, and change this div to an Article. If I save that, I can preview the changes over here.
[2:24] We have some extra styles and padding for the Hello page and also for the about page. One small thing, here, we can see that this page has been pre-rendered. What that means is that by default, Next.js is going to pre-render every page, so it is going to generate HTML for each page in advance instead of doing that by the client-side JavaScript. This can result in a much better performance and SEO for our pages.