Managing and Creating Pages in Next.js

Written by

Ty Petty

on

Next.js is a powerful React framework that simplifies building fast, scalable, and SEO-friendly applications. One of its core features is its file-based routing system, which makes managing and creating pages intuitive. In this post, we’ll explore how Next.js handles pages, how to create and manage them, and how they function under the hood.

To understand where we are beginning in this tutorial, checkout the blog post about How to Begin a Next.js Project. I will be starting where that post left off. I you already know how to start a Next.js project, then go ahead and continue reading here.

Understanding Pages and Routing in Next.js

In a Next.js application, the app/ directory is the foundation of your app’s routing system. Unlike traditional React applications where you define routes manually using React Router, Next.js automatically creates routes based on the file structure inside the app/ directory.

For example:

  • app/page.tsx → Maps to / (home page)
  • app/new-page → Maps to /new-page

This file-based routing system eliminates the need for a separate routing configuration, making navigation simpler and more efficient.

Creating Pages in Next.js

To create a new page in Next.js, simply add a new folder/directory inside the app/ directory. Each folder should contain a default exported React component inside a TypeScript file called page.tsx that represents the page’s UI.

Example: Creating an About page (app/about/page.tsx):

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page!</p>
    </div>
  );
}
export default About;

Now, visiting http://localhost:3000/about will display this page. It is important to note that the route name after the backslash is the name of the directory or folder you created to hold the TypeScript file.

Nested Routing

You can organize pages in subdirectories to create nested routes.

Example:

  • app/new-page/nested-page → maps to /new-page/nest-page
  • app/about/help → maps to /about/help

Below is an example of the help page nested under the about directory.

The code I added into the help/page.tsx file is shown below. 

function Help() {
    return (
      <div>
        <h1>Help Us</h1>
        <p>Welcome to our help page!</p>
      </div>
    );
  }
  export default Help;

The resulting page on the route http://localhost:3000/about/help is shown in the screenshot below.

Linking Between Pages

To navigate between pages, Next.js provides the built-in next/link component, which optimizes navigation for performance.

Example:

import Link from 'next/link';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
}
export default Home;

In this example, the text between the two Link tags would be clickable and would route the user to the About page.

Conclusion

Managing pages in Next.js is straightforward thanks to its file-based routing system. Whether you’re creating static pages, nested structures, or wanting to navigate between the pages, Next.js makes development very simple. By understanding how pages work, you can build scalable and well-structured applications with ease.

Short and simple! Check out the rest of our blog posts for any other questions you may have or comment your questions below. We would love to hear and answer your questions and concerns.

More posts