Lazar Nikolov
—Next.js allows us to create dynamic routes, which are routes that can accept
parameters. For example, we can create a route that accepts a userId
parameter
and renders a user profile page for that user. But, how do we get the userId
parameter from the URL?
To obtain the query parameters from the URL, you can use the useRouter
hook.
The hook is imported from different packages depending on the version of Next.js
and whether you use the app
directory or the pages
directory.
pages
directory, or the Next.js version is 12 or earlier,
import the hook from 'next/router'
;'next/navigation'
;After you import the hook, you can use it to get the query parameters from the URL like so:
// pages/users/[userId].js function UserProfile() { const router = useRouter(); const { userId } = router.query; return <div>User ID: {userId}</div>; }
Have in mind that the
router.query
object is empty on the initial render, because Next.js hasn’t fetched the data yet. You can use therouter.isReady
property to check if the data is ready.
Since you can’t use the useRouter
hook on the server-side, you can obtain
the query parameters from the ctx
argument of the getServerSideProps
method.
The ctx
argument is an object that contains the request and response objects,
as well as other useful information.
If the previous page was rendered on the server-side, here’s how you would get
the userId
parameter:
// pages/users/[userId].js export async function getServerSideProps(ctx) { const { userId } = ctx.query; return { props: { userId, }, }; } function UserProfile({ userId }) { return <div>User ID: {userId}</div>; }
At the time of writing this answer, Next.js doesn’t support query parameters in server components. You can only obtain the query parameters from the page that renders the server component:
// app/users/[userId]/page.tsx import { User } from '../../components/User'; export default function UserProfile({ params, searchParams, }: { params: { slug: string }, searchParams?: { [key: string]: string | string[] | undefined }, }) { const { userId } = params; // ... }
If you’re looking to get a deeper understanding of how Next.JS application monitoring works, take a look at the following articles:
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.