How do I leverage query and route parameters in Next.js?

Question

Is there a possibility that Next.js does route matching with these routes?

/items?search=foo

/items/:id

I could do it in another way but I must respect the specifications.

Answer 1

Yes, Next.js does matching with those routes.

Keep in mind, Next.js does file system based routing, so you need to structure your routes as follows:

📦 project
 ┣ 📂node_modules
 ┣ 📂pages
 ┃ ┗ 📂items
 ┃   ┗ 📜[id].js
 ┃   ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┗ 📜package.json

[id].js will match /items/:id , you can access the id in the component by doing:

const router = useRouter()
const { id } = router.query

index.js will match /items?search=foo

You can get the query param by doing:

const router = useRouter();
const query = router.query

The query object will look something like { search: foo }