In Next.js, a page is a React Component exported from a file in the pages
directory.
Pages are associated with a route based on their file name. For example, in development:
pages/index.js
is associated with the /
route.pages/posts/first-post.js
is associated with the /posts/first-post
route.We already have the pages/index.js
file, so let’s create pages/posts/first-post.js
to see how it works.
Create the posts
directory under pages
.
Create a file called first-post.js
inside the posts
directory with the following content:
export default function FirstPost() {
return <h1>First Post</h1>;
}
The component can have any name, but you must export it as a default
export.
Now, make sure that the development server is running and visit http://localhost:3000/posts/first-post. You should see the page:
This is how you can create different pages in Next.js.
Simply create a JS file under the pages
directory, and the path to the file becomes the URL path.
In a way, this is similar to building websites using HTML or PHP files. Instead of writing HTML you write JSX and use React Components.
Let's add a link to the newly added page so that we can navigate to it from the homepage.
Quick Review: If you wanted to add a new route /authors/me
, what would the file name be (including the directory)?