Static Page Routing: Building Core Sections in Next.js

Previously in this course, we covered implementing navigation with the next.js link component to create a seamless user experience. Now that you can move between pages, we need to actually build those destination pages.

In this lesson, we’re moving beyond the homepage to establish a robust site structure using static routing. By the end of this guide, you’ll have a professional multi-page blog with distinct 'About' and 'Contact' sections, all while leveraging the App Router’s filesystem-based architecture.

Understanding Static Routing in Next.js

In Next.js, "static" simply means the route path is known at development time. Unlike dynamic routes (which we'll tackle in the next lesson), static routes correspond directly to folders in your app/ directory.

If you recall from our discussion on the understanding the app router architecture, every folder creates a new URL segment. To create an about page, you create an about folder; to make it accessible, you drop a page.js file inside it.

This approach is elegant because it mirrors your URL structure, making it intuitive to navigate and maintain as your project grows.

Building Your Static Pages

Let’s flesh out our blog project. We currently have a homepage. Let's add an "About" page and a "Contact" page.

1. Create the directories: Inside your app/ folder, create two new directories: about and contact.
2. Add the entry files: Inside each folder, create a page.js file.

The About Page Example

Your file structure should now look like this:

TEXT
app/
├── about/
│   └── page.js
├── contact/
│   └── page.js
└── page.js (your existing home)

In app/about/page.js, we define a simple Server Component:

JSX
// app/about/page.js
export default function AboutPage() {
  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-4xl font-bold mb-4">About This Blog</h1>
      <p className="text-lg">
        Welcome to my journey! This blog is built with Next.js 
        and the App Router to demonstrate modern web practices.
      </p>
    </main>
  );
}

Maintaining Layout Consistency

A common mistake for beginners is manually re-importing the navbar and footer into every single page. This defeats the purpose of the App Router's hierarchical layout system.

Since we already defined our building the root layout, Next.js automatically wraps every page in that layout.js file. Because our navigation component is likely part of that root layout, the links will persist, and the header/footer will remain visible as you navigate from / to /about or /contact.

If you need a specific layout for a subset of pages (like a sidebar just for blog pages), you can nest layout.js files, but for these simple static pages, the root layout is sufficient.

Hands-on Exercise

1. Create the app/contact/page.js file.
2. Add a simple form or a "Get in touch" message inside that file using Tailwind classes for basic styling.
3. Update your navigation component (from our previous lesson) to include links to /about and /contact.
4. Verify that clicking these links updates the URL and content without a full page reload.

Common Pitfalls

• Forgetting the page.js file: Next.js will ignore folders that don't contain a page.js or route.js file. If you navigate to /about and get a 404, check for the file name—it must be exactly page.js (or .tsx).
• Case Sensitivity: While Windows is case-insensitive, Linux (and Vercel's production environment) is case-sensitive. Always use lowercase for your folder names.
• Over-nesting: Don't create deep folders like app/pages/about/page.js. Keep your routes as flat as possible to avoid URL bloat.

FAQ

Q: Can I add sub-pages like /about/team? Yes. Simply create a team folder inside the about folder (app/about/team/page.js).

Q: Do I need to use use client for these pages? No. These pages are static, so they should remain Server Components by default. Only add 'use client' if you need interactivity like useState or useEffect.

Q: How do these affect SEO? Since these are static pages, Next.js renders them at build time (or on the first request), making them highly performant and SEO-friendly.

Recap

We’ve successfully expanded our project structure. By mapping folders to URLs, we created static pages that automatically inherit our global styles and layouts, ensuring a consistent user experience. You now have the foundational knowledge to organize any content-heavy site using the App Router.

Up next: We will move beyond fixed content and learn how to handle dynamic routes using the [slug] syntax.