In this guide, we’ll explore routing in Next.js 15, how to create individual pages, and how to structure your application effectively using the new App Router. Let’s dive in!
Routing in Next.js is the process of directing users to different pages of your application based on the URL path.
Each page in a website is identified by a unique URL path.
The path after the domain determines which page to display.
If the URL is https://example.com/dashboard/settings:
dashboard/settings is the path.
Next.js routes the user to the corresponding page in your app.
The App Router, introduced in Next.js 13 and enhanced in version 15, replaces the older Pages Router.
Default Behavior: Pages created using the App Router are rendered on the server by default.
Legacy Note: The Pages Router still exists for older projects, but using the App Router is recommended for new applications.
Next.js uses a file-system-based router, making it intuitive to define routes:
Folders represent path segments.
A page.js file inside a folder creates a public page for that path.
To create a page for the URL https://example.com/dashboard/settings:
Create a dashboard folder inside the app folder.
Inside dashboard, create a settings folder.
Inside settings, create a page.js file.
The structure will look like this:
app/
├── dashboard/
│ ├── settings/
│ │ └── page.jsThe page.js file located directly in the app directory represents the main page of your app (root route /).
// app/page.js
export default function HomePage() {
return <h1>Welcome to the Main Page!</h1>;
}Create a folder named about inside the app directory.
Inside the about folder, create a page.js file.
Add the following code to define the About page:
// app/about/page.js
export default function AboutPage() {
return <h1>About Me</h1>;
}Navigate to /about to see the new page!
To create a nested route like /about/projects:
Inside the about folder, create another folder called projects.
Inside projects, create a page.js file.
Define the content for this page:
// app/about/projects/page.js
export default function ProjectsPage() {
return <h1>My Projects</h1>;
}Now, visiting /about/projects will display the Projects Page.
By default, pages are rendered on the server. If you need client-side rendering (e.g., when using useState), add the use client directive:
// app/about/page.js
'use client';
import { useState } from 'react';
export default function AboutPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>About Me</h1>
<button onClick={() => setCount(count + 1)}>Click Me: {count}</button>
</div>
);
}Here’s what your project structure might look like after adding these routes:
app/
├── page.js // Main page
├── about/
│ ├── page.js // About page
│ └── projects/
│ └── page.js // Projects page/ → Displays the Main Page.
/about → Displays the About Page.
/about/projects → Displays the Projects Page.
Routing is file-based: Use folders to create path segments and page.js for public pages.
App Router: Default for Next.js 15, using server-rendered React components.
Client-Side Rendering: Add the use client directive when needed.
Now that you understand routing, try building a few routes and see how easy it is to navigate between pages in Next.js 15! 🚀