[ad_1]
Find out about Subsequent.js, the Pages router, and dynamic navigation
This publish reveals the way to add dynamic routing to a Subsequent.js app utilizing the Pages router.
In one other article, I’ll broaden on this to construct an entire Subsequent.js utility.
Subsequent.js is a React framework that provides you constructing blocks to create internet functions.
Earlier than leaping into dynamic routing, we are going to briefly cowl the important thing factors of Navigation and the Hyperlink part.
From Could 4th, 2023 (Subsequent.js 13.4), there are two secure routers in Subsequent.js:
On this article, we use the Pages router, as it’s the most typical. In one other article, I’ll create an entire app utilizing the App router, which may grow to be fashionable.
Pages router and navigation
In Subsequent.js, a web page is a React part exported from a file within the pages folder.
That is vital to grasp as a result of every web page is related to a route. In different phrases, every web page in Subsequent.js corresponds to a singular URL that customers can entry.
On this Subsequent.js instance on StackBlitz, I created the About part by creating the file about.js contained in the pages folder.
In so doing, Subsequent.js robotically creates a path to /about.
To navigate totally different routes, Subsequent.js presents the Hyperlink part used on line 9.
<Hyperlink href="/">Residence</Hyperlink>
In line with the docs, “<Hyperlink> is a React part that extends the HTML <a> aspect to offer prefetching and client-side navigation between routes. It’s the major technique to navigate between routes in Subsequent.js.”
Equally, we add a Hyperlink part in index.js to navigate to About:
// pages/index.jsimport Hyperlink from 'subsequent/hyperlink';
...
export default operate Residence() {
return (
<div className={types.container}>
...
<fundamental className={types.fundamental}>
<h1 className={types.title}>
Welcome to <a href="https://nextjs.org">Subsequent.js!</a>
</h1>
<Hyperlink href="/about">About</Hyperlink>
</fundamental>
...
</div>
);
}
At this level, you must be capable of navigate forwards and backwards to the About web page by clicking on the About hyperlink:
Dynamic routing
If we’d like a routing construction like the next:
- a
merchandiseweb page the place on the identical web page it’s possible you’ll wish to present product 1 or product 2, and many others. The URL must be/merchandise/book12,/merchandise/mouse452, and many others. - a
customersweb page the place on the identical web page it’s possible you’ll wish to present consumer 1 or consumer 2, and many others. The URL must be/consumer/1,/consumer/2, and many others.
We have to use dynamic routing.
Making a dynamic routing with the Pages router in Subsequent.js is kind of easy!
Because the Pages router builds on the pages you create, we will add a file like pages/customers/[userId].js to create a dynamic route the place the userId parameter may be totally different for every web page.
![Users component at pages/users/[userId].js](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*eYuB6JEsax6PXfHoL8W-fA.png)
pages/customers/[userId].jsThe customers/[userId].js file represents a dynamic route the place the [userId] half signifies a parameter that may change, e.g., Dynamic Section.
// pages/customers/[userId].jsimport { useRouter } from 'subsequent/router';
import types from '../../types/Residence.module.css';
export default operate Customers() {
const router = useRouter();
const { userId } = router.question;
return (
<div className={types.container}>
<h1 className={types.title}>Person ID: {userId}</h1>
</div>
);
}
In short, we use the useRouter hook to entry the router object from which we get the userId from the URL.
For simplicity’s sake, we are going to manually change the URL by modifying the ending. You are able to do this within the browser on StackBlitz or by opening your Subsequent.js app in one other tab.
On Stackblitz, you possibly can open the app in one other tab by clicking on the port in use, as follows:
Both manner, when you add /customers/1 to the top of the URL, you must be capable of see the Customers web page as follows:
For those who change the ending of the URL to the next segments:
/customers/134/customers/kUrwwer34w/customers/Hanna
you’ll discover that the Customers part will present totally different information.
We simply created a dynamic route in Subsequent.js. The consumer’s ID may be extracted from the URL to render dynamic content material.
From right here, you possibly can fetch the proper information to point out extra data on that consumer.
That is a part of a broader set of posts on Subsequent.js I’m engaged on. Be happy to browse my profile for extra or go away a remark!
Trying ahead to listening to your opinions!
[ad_2]