Learn how pages, folders, and filenames drive routing in Next.js with zero config.
pages/
├── page.js → '/'
├── about/
│ ├── page.jsx → '/about'
├── blog/
│ ├── page.jsx → '/blog'
│ └── [slug].jsx → '/blog/:slug'
├── dashboard/
│ ├── page.jsx → '/dashboard'
│ └── settings/
│ ├── page.jsx → '/dashboard/settings'
├── not-found.jsx → Custom 404 page
├── _app.js → Custom App wrapperSee how Next.js maps your file structure directly to your application routes, with zero configuration.
// pages/page.jsx
export default function HomePage() {
return <h1>Welcome to Next.js!</h1>;
}
The page.jsx file in the pages directory automatically becomes your home route (/) in Next.js.
// pages/about/page.jsx
export default function AboutPage() {
return <h1>About US</h1>;
}
Any .js/.tsx file in the pages directory becomes a route automatically. No configuration needed!
// pages/blog/page.jsx
export default function BlogPage() {
return <h1>Blog Posts</h1>;
}
Nested /blog/page.jsx files map to their parent folder's path, creating a clean URL structure.
// pages/blog/[slug].jsx
import { useRouter } from 'next/router';
export default function BlogPost() {
const router = useRouter();
const { slug } = router.query;
return <h1>Post: {slug}</h1>;
}
Square brackets [param] create dynamic routes. The parameter is accessible via router.query.
// pages/dashboard/page.jsx
export default function DashboardPage() {
return <h1>Dashboard</h1>;
}
Folder structures create intuitive nested routes for better organization of app features.
// pages/dashboard/settings/page.jsx
export default function SettingsPage() {
return <h1>Dashboard Settings</h1>;
}
Nested files map to nested routes. This creates a logical structure that matches your URL hierarchy.
Explore how file paths transform into routes. Click on any file to see the corresponding route and component code.
Select a file to see its route and code
// pages/page.jsx
export default function HomePage() {
return (
<div>
<h1>Welcome to Next.js!</h1>
<p>This is the home page.</p>
</div>
);
}
The page.jsx file in the pages directory automatically becomes your home route (/). Next.js handles this mapping without any configuration.
Next.js provides a powerful yet simple file-based routing system with these key features:
Files in the pages directory automatically become routes. No configuration needed.
Square brackets in filenames create dynamic routes with URL parameters captured in router.query.
Create organized, nested routes by using folders. Folder structure directly maps to URL paths.
Use [...param] to create routes that catch all subsequent path segments as an array.
Special page files like _app.js, _document.js, and not-found.jsx customize your app's behavior.
Start building immediately without complex router setup. Next.js handles linking, history, and navigation for you.
Explore syntax-highlighted examples of Next.js routing patterns and implementations.
Create a basic static page by adding a file in the pages directory. The file name becomes the route.
pages/about/page.jsxhttp://localhost:3000/about
// pages/about/page.jsx
export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our team and mission.</p>
</div>
);
}
Use square brackets [param] in the file name to create a dynamic route that captures URL parameters.
pages/blog/[slug].jsxhttp://localhost:3000/blog/hello-world// pages/blog/[slug].jsx
import { useRouter } from 'next/router';
export default function BlogPost() {
const router = useRouter();
const { slug } = router.query;
return (
<div>
<h1>Blog Post: {slug}</h1>
<p>This is a dynamic route.</p>
</div>
);
}
Use [...param] to create routes that match multiple path segments. The parameter becomes an array with all segments.
pages/docs/[...slug].jsxhttp://localhost:3000/docs/features/routing/dynamic// pages/docs/[...slug].jsx
import { useRouter } from 'next/router';
export default function DocsPage() {
const router = useRouter();
const { slug } = router.query; // slug will be an array
return (
<div>
<h1>Documentation</h1>
<p>Path: {slug?.join('/')}</p>
<ul>
{slug?.map((segment, i) => (
<li key={i}>{segment}</li>
))}
</ul>
</div>
);
}Create a custom 404 error page by adding a not-found.jsx file to the pages directory.
pages/not-found.jsxAny non-existent route// pages/not-found.jsx
import Link from 'next/link';
export default function Custom404() {
return (
<div className='text-center py-10'>
<h1 className='text-4xl font-bold'>404 - Page Not Found</h1>
<p className='mt-4'>The page you're looking for doesn't exist or has been moved.</p>
<div className='mt-6'>
<Link href='/'>
<a className='text-blue-500 hover:underline'>Go back home</a>
</Link>
</div>
</div>
);
}Declarative, file-system based routing means you spend less time configuring and more time building your application. Your project structure becomes your URL structure.
Find answers to commonly asked questions about our coding courses.
No prior experience is needed for our beginner courses. We start from the absolute basics and gradually progress to more advanced concepts. For intermediate and advanced courses, we recommend having the prerequisite knowledge mentioned in the course description.
Once you purchase a course, you have lifetime access to all course materials, updates, and the community forum related to that course. We regularly update our content to keep it relevant with the latest industry standards.
Yes, we offer a 30-day money-back guarantee. If you're not completely satisfied with your purchase, you can request a full refund within 30 days of enrollment. No questions asked.
Most courses require about 4-6 hours per week to complete in a reasonable time frame. However, our platform is self-paced, so you can learn according to your own schedule. Each course indicates the estimated completion time in the description.
Yes, all courses come with a certificate of completion that you can add to your resume or LinkedIn profile. For some advanced courses, we also offer industry-recognized certifications upon passing the final assessment.
You'll have access to our community forum where you can ask questions and get help from instructors and fellow students. Premium courses include direct mentor support, code reviews, and weekly live Q&A sessions.
Access our free tutorials, coding challenges, and community projects to supplement your learning.
Browse ResourcesStay updated with the latest programming trends, tips, and industry insights from our expert instructors.
Read Blog