Routing in Next.js refers to the process of determining how different URLs or paths in a web application map to different components or pages.
Next.js uses a file-based routing system, where each folder represents a route segment that maps to a URL segment. And you can create a nested route by nesting folders inside each other. For example:
app/
pages/
├── page.js // maps to "/"
└── products/
├── page.js // maps to "/products"
└── hats.js // maps to "/products/hats"
and the URL will be something like https://........../products/hats.
How to navigate between pages:
<link> in Next.js is a built-in component that helps you to navigate between routes. This component allows you to use anchor tags <a> but internally uses client-side navigation to avoid unnecessary server requests. You can use it by importing it from the next/link and passing a herf prop. For example:
import link from 'next/link'
export default function Products() {
return <Link herf="/hats">Hats</Link>
}
You can use useRouter() (which is a hook) to programmatically change routes. This hook can only be used inside Client Components and is imported from the next/navigation
'use clint'
import useRoute fron 'next/navegation'
export default function Home() {
const route = useRouter ()
return (
<button type="button" onClick={() => route.push('/hats')}>
Hats
</button>
)
};
Dynamic routing:
It is a very useful tool to create pages with dynamic segments in the URL path based on parameters. This is particularly useful for creating pages that share a common structure but display different content based on the dynamic segments in the URL. So instead of defining a fixed set of routes for every possible URL, we use dynamic routes.
Dynamic segments can be created by adding square brackets [name]. For example: [slug] or [id].
Example:
A shop can include a dynamic segment [slug] for available products in the shop.
the route will be app/pages/products/[slug]/page.js, and the URL will look like https://......./products/[slug]. The file structure will be:
app/
pages/
├── page.js // maps to "/"
└── products/
├── [slug]
│ └── page.js // dynamic route, maps to "/products/dynamic-value"
└── page.js // maps to "/products"
And the dynamic route template will be:
export default function Page({ params }: { params: { slug: string } }) {
return <div>Products: {params.slug}</div>
}
Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.
You can catch all subsequent segments by adding an ellipsis inside the brackets like [...name]. and it can be made optional by adding double square brackets like [[...name]].
Route groups:
Route groups are not like the other folders in Next.js. it is used to organize route segments and project files into groups without it being included in the route's URL path. It can be created by adding parenthesis like (name).For example:
app/
pages/
├── page.js
└── (shop)
└──products/
├── [slug]
│ └── page.js
└── page.js
If for example you added a layout file in two route groups like this:
app/
pages/
├── page.js
└── (shop)
│ └──layout.js
└── (products)
└──layout.js
Then each folder ( (shop) and (products) ) has its own layout without affecting the other.
Group route is a very useful tool for big projects to help the developer to organize and separate folders and files depending on the user's needs.
conclusion
File-based routing in Next.js offers several benefits that contribute to the development experience, organization, and performance of web applications, making it easier to create and maintain complex web applications while benefiting from features like server-side rendering, dynamic routing, and optimized code splitting.