Create Dynamic Routes in Next.js for Chat Rooms

Share this video with your friends

Send Tweet

With rooms being created and displayed on the index page, it's now time to create dynamic routes for each room so that when you click on a room name, you are actually navigated to that room.

We'll do this by using Next.js dynamic route syntax /rooms/[...id]/page.js. This will render a page on any /rooms/:id passing the component we define the :id as params.

Here we'll take that id and fetch the room data from fauna with a Room.byId query.