Create Dynamic Routes in Next.js for Chat Rooms
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.
[00:00] Okay. So here in the home page, now we have a list of the rooms. Now I want to be able to click on these rooms and enter one of these rooms. So let's go ahead and add that functionality. So we're gonna go back to our code and we're gonna go to our page file. And in the page component, we're going to import link [00:19] from next link. And then we are gonna go to our JSX. And here, I'm going to replace the button with the link. So here, we're generating dynamic links for each of the room in existing room array. And I'm going to add a h ref [00:39] here, and it's going to be rooms and the ID of the room. This way we'll have a dynamic link for each of the rooms, and clicking into one of these will take us to that link. Now back in our app, if we go and click any of these rooms, you will see that the route will change, but [00:59] we're gonna get a 4 zero four error because we haven't really created the dynamic pages for this route. So let's go ahead and do that. Alright. So inside our our app folder, we're going to create a new folder and we're going to call it rooms. And then inside rooms, we're [01:19] gonna create another folder and we're gonna have a square bracket and triple dot ID. Now this folder structure in Next. Js sets up the dynamic routes. Next, we create a page dot JS file inside the id folder. Next, we're gonna create a very simple page component here. We're gonna [01:39] write export default function room. And then I'm going to return some simple JSX and I'll return a simple h one tag. Next, just to be consistent, let's add the same styles from [01:59] home page to this page. So I'm going to import the styles from page module css, and I will add a class name to the outer div. So it's going to be styles dot main. So in this room component, we're going to fetch all the information about this room from database and we're going to make a database query in [02:19] this component. So by default, it's gonna happen in server side because we're using Next 14. So we're gonna import client and f q l from fauna. And then we're going to initialize a new phono client. So we do new client and we pass in the secret from our environment variable. [02:40] Next we are going to destructure the params props from this component. And this params props is passed down from Next. Js. Now let's make the database query. I'm gonna write const response client dot query. And then I'm gonna [03:00] write FQL inside round bracket and back ticks. And inside the back ticks, we're gonna write room dot by ID, and we're gonna pass in the ID of the room. And we can get the ID of the room from the params props. So we're gonna write params dot ID and then index [03:20] 0 because we want the first params from the route. And I'm getting an error on await. So let's just go ahead and add async in front of the function. And in rjsx, we are going to remove the word room, and we're just gonna add response dot data dot [03:40] name so it displays the name of the room. Okay. So now in our browser, let's test everything. So here if we select a room, it takes us to that route and we can also see the name of the room. Let's go back and let's try with a different one. And this also displays the name [03:59] correctly. And there we have it.