File-Based Routing in Next.js

What is file-based routing in Next.js?

File-based routing means the folder and file names map directly to URL paths.

You don't need React Router or additional configuration: create files and folders, and Next.js generates the routes automatically.

App Router vs Pages Router (quick overview)

Next.js uses the App Router by default.

This article focuses on the App Router.

Basic Next.js Folder Structure

After creating a Next.js app you'll see a structure like this:

  app/ 
    ├─ page.tsx
    ├─ layout.tsx
    ├─ globals.css
  public/
    ├─ icon.svg
  next.config.js
  package.json

Let's break down the folder structure:

app/ folder

• page.tsx: The main page component for the root route.
• layout.tsx: The layout component that wraps all pages in the app.
• globals.css: Global CSS styles for the application.

public/ folder

• icon.svg: The application's icon file.

Other files

• next.config.js: Configuration file for Next.js settings.
• package.json: Contains project metadata and dependencies.

Static Routes in Next.js

Static routes are determined by the file structure within the app/ directory. Each file or folder in this directory corresponds to a route in your application.

For example, to create a route for /about, create about/page.tsx inside the app/ folder:

  app/
    ├─ about/
        ├─ page.tsx
    ├─ blog/
        ├─ page.tsx
    ├─ page.tsx

This structure automatically sets up the /about and /blog routes in your Next.js application.

Dynamic routes

Dynamic routes let pages accept variable URL segments. Define dynamic segments using square brackets in folder or file names.

For example, create [slug]/page.tsx inside app/blog/ to handle blog post URLs:

  app/
    ├─ blog/
        ├─ [slug]/
            ├─ page.tsx

/blog/react
/blog/nextjs
/blog/typescript

This setup allows you to handle routes like /blog/my-first-post or /blog/another-post, where slug is a variable part of the URL.

Accessing dynamic route parameters

Access dynamic route parameters in your page component via the params object.

For example, in app/blog/[slug]/page.tsx you can access slug like this:

import { notFound } from 'next/navigation';

export default function BlogPost({ params }: { params: { slug: string } }) {
  const { slug } = params;
  // Use the slug parameter to fetch blog post data
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

Routing files

Routing is driven by the file and folder layout inside app/. Common special files include:

• page.tsx: The main page component for a route.
• layout.tsx: The layout component that wraps all pages in a specific route segment.
• loading.tsx: A component that displays a loading state while the page is being fetched.
• error.tsx: A component that handles errors for a specific route segment.
• not-found.tsx: A component that displays a 404 Not Found page for a specific route segment.

Conclusion

File-based routing in Next.js is a powerful feature that simplifies the creation and management of routes in your application.

By organizing your pages within the app/ directory, you can easily define static and dynamic routes without needing to configure routing manually.