Next.js Routing

Next.js Routing: Understanding the File-Based Router

Next.js Routing relies on a clean, file-based routing architecture inside the app/ folder. Folders define route segments, and special filenames create accessible web pages and layouts.

In Next.js, every folder inside app/ represents a URL path segment. Adding a page.tsx file inside a folder makes that route segment publicly reachable in the browser.

flowchart TD
    app["app/"] --> page["page.tsx -> /"]
    app --> about["about/"]
    about --> aboutPage["page.tsx -> /about"]
    app --> blog["blog/"]
    blog --> slug["[slug]/"]
    slug --> slugPage["page.tsx -> /blog/:slug"]

Standard Route Structure

Here is how folder structures translate directly into web URLs:

Dynamic Route Segments

When building pages like blog posts or user profiles, route segments need dynamic values. Wrap a folder name in square brackets [slug] to create dynamic routes:

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>;
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params;
  
  return (
    <article className="p-6">
      <h1 className="text-2xl font-bold">Reading Article: {slug}</h1>
      <p className="mt-4">This content renders dynamically for slug parameter: {slug}</p>
    </article>
  );
}

Route Groups (groupName)

Organize routes without affecting URL path names by placing folder names in parentheses (marketing) or (shop):

app/
├── (marketing)/
│   ├── about/page.tsx      -> /about
│   └── contact/page.tsx    -> /contact
└── (checkout)/
    └── cart/page.tsx       -> /cart

Best Practices for Routing

• Keep Special Files Standard: Use correct file names (page.tsx, layout.tsx, loading.tsx, error.tsx).
• Use Route Groups for Shared Layouts: Separate marketing views from user dashboards without adding ugly subpaths to your URLs.
• Validate Dynamic Parameters: Always sanitize and validate dynamic parameters before querying databases.

Summary

Next.js routing replaces complex router code with intuitive folder nesting. Dynamic routes and route groups give you total control over application URL architecture.