[Next.js 15] - Part 3. File-system Routing and Creating Pages
Ace Lennox
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!
What is Routing?
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.
Example:
If the URL is https://example.com/dashboard/settings:
dashboard/settingsis the path.Next.js routes the user to the corresponding page in your app.
The App Router
What's New?
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.
File-Based Routing
Next.js uses a file-system-based router, making it intuitive to define routes:
Folders represent path segments.
A
page.jsfile inside a folder creates a public page for that path.
Example:
To create a page for the URL https://example.com/dashboard/settings:
Create a
dashboardfolder inside theappfolder.Inside
dashboard, create asettingsfolder.Inside
settings, create apage.jsfile.
The structure will look like this:
app/
├── dashboard/
│ ├── settings/
│ │ └── page.jsCreating Routes in Next.js
Main Page
The 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>;
}About Page
Create a folder named
aboutinside theappdirectory.Inside the
aboutfolder, create apage.jsfile.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!
Nested Pages
To create a nested route like /about/projects:
Inside the
aboutfolder, create another folder calledprojects.Inside
projects, create apage.jsfile.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.
Client-Side Rendering
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>
);
}Visualizing the Structure
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 pageExample of Navigating to Pages
/→ Displays the Main Page./about→ Displays the About Page./about/projects→ Displays the Projects Page.
Key Takeaways
Routing is file-based: Use folders to create path segments and
page.jsfor public pages.App Router: Default for Next.js 15, using server-rendered React components.
Client-Side Rendering: Add the
use clientdirective 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! 🚀