NEXT103 - File-Based Routing in Next.js

One of the most powerful features of Next.js is file-based routing.
Instead of manually configuring routes, Next.js generates routes automatically based on your folder and file structure.

What Is File-Based Routing?

File-based routing means that each folder and file inside the app directory becomes a route.
This approach removes the need for a separate routing configuration and makes navigation predictable and scalable.

The app Directory Recap

In modern Next.js, routing is handled inside the app directory.

Key files:

• app/page.js = root route (/)
• app/layout.js = root layout
• app/globals.css = global styles

Routes are created based on the folder structure under app.

Creating Basic Routes

Each folder containing a page.js file becomes a route.

Example structure:

app/
  page.js
  about/
    page.js
  blog/
    page.js

Generated routes:

• /
• /about
• /blog

No additional configuration is required.

Nested Routes

Folders can be nested to create nested routes.

app/
  blog/
    page.js
    posts/
      page.js

Generated routes:

• /blog
• /blog/posts

Nested routing mirrors the folder hierarchy.

Dynamic Routes

Dynamic routes allow you to create pages with dynamic segments using square brackets.

Example:

app/
  blog/
    [slug]/
      page.js

This generates routes like:

• /blog/hello-world
• /blog/nextjs-routing

The slug value can be accessed inside the page component.

Accessing Route Parameters

Dynamic parameters are available via the params object.

function BlogPost({ params }) {
  return <h1>{params.slug}</h1>;
}
 
export default BlogPost;

This allows you to render content based on the URL.

Catch-All Routes

Catch-all routes handle multiple dynamic segments.

Example:

app/docs/[...slug]/page.js

This matches:

• /docs/a
• /docs/a/b
• /docs/a/b/c

The slug parameter becomes an array of values.

Optional Catch-All Routes

Optional catch-all routes also match the parent path.

Example:

app/docs/[[...slug]]/page.js

This matches:

• /docs
• /docs/a
• /docs/a/b

Useful for flexible documentation structures.

Not Found Pages

You can define a custom 404 page using not-found.js.

app/not-found.js

This file is rendered when a route does not exist.

Route Groups (Optional)

Route groups allow you to organize routes without affecting the URL.

Example:

app/(marketing)/page.js
app/(dashboard)/page.js

Both generate / but help structure the codebase.

Common Routing Mistakes

Avoid these issues:

• Forgetting page.js inside folders
• Mixing pages router and app router
• Incorrect dynamic segment naming
• Assuming folders without page.js create routes

Understanding routing rules prevents navigation bugs.

Summary

In this lesson, you learned:

• What file-based routing is
• How routes are generated automatically
• Creating nested routes
• Using dynamic and catch-all routes
• Accessing route parameters
• Organizing routes effectively

In the next lesson, we will compare Pages Router vs App Router and clarify when to use each approach.