URL Query params & Dynamic Route params in Next.js
Next.js has definitely taken React.js to another level with Server-Side-Rendering (SSR) components and its page files based routing, taking React.js from Single-Page-Application (SPA) with Multi-Page behavior, to a real Multi-Page-Application (MPA) where the browser really loads new page. With that, the data once shared between React page components via components props or Redux, now need a new way to be communicated.
Consider scenarios such as the values of a search text input box is to be sent to another page to perform the search based on this input. Or a list of blog subjects where clicking a subject will route to a new page of that subject.
In this article, I’ll be discussing the following Next.js approaches of handling page params:
- CSR URL query params handling (App Router)
- CSR URL query params handling (Pages Router)
- SSR URL query params handling (PagesRouter)
- SSR URL query params handling (App Router)
- Dynamic Routing params handling
Before we start, I assume you have some knowledge of JavaScript, React.js and Next.js. I’ll be using TypeScript but you may feel free to remove the typing and stick to vanilla JavaScript. So, let’s get started. 😃
