Here’s a beginner-friendly guide to Next.js Routing, one of its most powerful and simple features for building modern React apps with file-based navigation.
🧭 What is Next.js Routing?
In Next.js, routing is file-based — meaning the file and folder structure inside the pages/ directory defines your app’s routes.
✅ No need for
react-router-dom
✅ Pages and URLs are automatically created for you
📁 File-based Routing Example
✅ This structure gives you:
/→index.js/about→about.js/blog→blog/index.js
🔄 Client-Side Navigation with Link
Next.js uses its own Link component for client-side routing:
✅ This avoids full page reloads and feels like an SPA.
🧩 Dynamic Routing
You can create dynamic routes using brackets:
Example:
This matches:
In [id].js:
🧠 Catch-All Routes
To match multiple segments:
Matches:
/docs/a/docs/a/b/c
⚙️ Nested Routes (Folders)
Just create folders and files inside /pages/.
🔁 Redirects and Rewrites (next.config.js)
✅ Handy for SEO and legacy support.
📦 API Routes (Bonus)
You can also define API endpoints right inside /pages/api/
✅ Summary
| Feature | Example |
|---|---|
| Static route | /about → about.js |
| Dynamic route | /post/[id].js |
| Nested route | /dashboard/settings |
| Client navigation | <Link href="/page" /> |
| API route | /api/hello.js |
| Redirects/rewrites | In next.config.js |
