Next.js 15 Tutorial - 21 - params and searchParams

Summary

This video script explores how to work with dynamic routing in Next.js using params and search params. It explains the distinction between the two: **params** refer to dynamic URL segments (e.g., article ID), while **search params** are query parameters (e.g., language filters). The script provides practical examples, showing how to create links with both params and search params for multi-language support. It also demonstrates how to access these parameters asynchronously in server components and using the `use` hook in client components, emphasizing key differences between server and client-side handling. A notable point is that search params are unavailable in layout components.

Takeaways

• 😀 Params in XJS are promises that resolve to dynamic route parameters, such as article IDs.
• 😀 Search params in XJS are promises that resolve to query parameters, like language and filters.
• 😀 To create links with both params and search params, include dynamic routes (e.g., article ID) and query parameters (e.g., language) in your URLs.
• 😀 A simple news article page can be set up to support multiple languages using dynamic routes and query parameters for language selection.
• 😀 Use Next.js to define dynamic routes by creating folder structures like 'articles/[articleID]' and create a page to render articles.
• 😀 The Link component in Next.js can be used to dynamically render links for multiple languages, e.g., English, French, and Spanish.
• 😀 Dynamic route parameters (like article ID) are accessed using 'params', and query parameters (like language) are accessed using 'searchParams'.
• 😀 You can destructure params and searchParams in the component to access the values and render them dynamically in the UI.
• 😀 In server components, you can use async/await to handle promises for params and searchParams, but in client components, React's use hook is required instead.
• 😀 A crucial distinction is that layout components do not have access to searchParams, only params, which can lead to errors if not handled properly.

Q & A

What is the difference between params and search params in Next.js?

Params refer to dynamic route parameters like an article ID, while search params are query parameters such as language or filters, which can be accessed via the URL query string.

How can you create links with params and search params in Next.js?

You can create links by specifying dynamic route parameters (e.g., article ID) in the URL path and query parameters (e.g., language) in the query string, using the `href` attribute in the Link component.

What is the structure for handling dynamic routes and language switching in Next.js?

The structure involves creating a folder for articles, then a subfolder with a dynamic parameter (e.g., `[articleId]`), and defining a page that handles both dynamic route parameters and query parameters (e.g., language).

How can you access params and search params in a Next.js component?

You can access `params` and `searchParams` by using destructuring in the component’s props, and then awaiting their values if the component is a server component. For client components, use React hooks like `useParams`.

What is the difference between handling async in server and client components in Next.js?

In server components, you can use `async/await` to fetch `params` and `searchParams`, whereas in client components, you must use hooks such as `useParams` since async operations are not supported in client-side code.

Why can’t you access search params in layout components?

Layout components in Next.js only have access to dynamic route parameters (params) but do not support query parameters (searchParams), as these are intended to be used in page-level components instead.

How can you switch between different languages on the news article page?

You can provide links with different query parameters (`lang=en`, `lang=fr`, etc.) that allow users to switch between languages and re-render the page content accordingly.

What happens if you try to access params and search params in a client component without using the correct hooks?

If you attempt to use `async/await` without hooks in a client component, you will encounter an error because client components don’t support async operations directly.

What role does `useParams` play in client-side rendering?

The `useParams` hook is used in client-side components to access dynamic route parameters and query parameters, enabling dynamic content rendering based on the URL.

Can you provide an example of how to render dynamic content based on `params` and `searchParams` in Next.js?

In the news article component, you can destructure `params` and `searchParams` from the props, then use their values (e.g., `articleId` and `lang`) to render specific content, such as the article and its language.