Exploring Next.js 14 Routing Mechanisms
Exploring Next.js 14 Routing Mechanisms
Next.js 14 introduces a more intuitive and flexible routing system, making it easy to manage static, dynamic, nested, and API routes. This guide walks through each routing type with examples, using a structured approach.
1. Basic Routing
Next.js automatically turns each file in the app directory into a route.
This structure gives us the following routes:
- Root Route (
/) -src/app/page.tsx - About Page Route (
/about) -src/app/about/page.tsx - Dynamic Blog Route (
/blog/[slug]) -src/app/blog/[slug]/page.tsx
2. Nested Routing
Nested routes are created by nesting folders and page.tsx files within the app directory.
Generated routes:
- Dashboard Route -
/dashboard - Settings Route -
/dashboard/settings - Profile Route -
/dashboard/profile
3. Dynamic Routing
Dynamic routes capture variables in URLs using square brackets [ ].
Here, [productId] captures any value as a parameter for the page component.
4. Catch-All Routing
Next.js supports catch-all routes using [[...param]], which handles multiple nested routes dynamically.
The route /blog/some/path/here is matched by [[...slug]].
5. API Routes
In Next.js 14, you can create API endpoints by placing files in the api directory within app.
This endpoint is accessible at http://localhost:3000/api/hello.
Summary
These routing mechanisms in Next.js 14 offer a comprehensive approach to manage routes across static pages, dynamic paths, and APIs with ease and structure.
Happy Coding!