Set up Dynamic Pages in Next.js 13 App Directory and Query with Page Slug

Instructor: [0:00] We want to set up Next.js Dynamic pages so that whenever we click on a post in our list, we get that specific post. To do this, we'll open up the VS Code and open our file explorer. In our file explorer, we'll create a new folder using the box bracket and the three dots notation to say it's a catch-all slug that will catch all routes that are dynamic.

[0:24] Inside that folder, we'll create a file called page.js. We want our page to follow the same format and design as our About page. And so, we'll copy this and paste it.

[0:39] Now, for the dynamic part, we'll change our name here to save blog. Inside blog, we'll access Next.js specific props for components called params. These params give us access to things like the slug.

[0:56] That way, we can dynamically show pages depending on what their slug is. In our case, we'll say const, and will destructure slug from params. We use this slug in our title and say, slug. We use it in our description and say, this is a page called Slug.

[1:25] Now we have scaffolded a dynamic page. We'll save the work and when we go into our browser, any URL that we type we should see it appear on our page as a title. Let's say Daniel, and so now we see the Daniel. This is a page called Daniel. We can change that to Egghead and we should say, Egghead. This is a page called Egghead. Music, this is a page called Music.

[1:58] Now, we want our page to dynamically show blog posts that we click in our list of blog posts that we get from Strapi, and so we leverage our params. To start out we'll define a function called get page, similar to our get posts page that we used in our Home page. I'll navigate there and copy that.

[2:21] We'll go back to our dynamic page here and paste that. Change get posts to get...Inside get page we'll add an argument called page slug. We'll use this page slug to fetch a specific blog post, and add that to our query parameter. We'll add a filter on our query by saying filters and add slug because we're searching with a slug. We'll search for a slug that is equal to the page slug.

[2:58] There we go. At the top of our file, we'll initialize another const called data, this time, and this will store the response from getPage. Inside that, we'll pass in the slug so that we can query and get data that is specific to whatever URL has been navigated to in our Home page.

[3:27] Then, we'll say const posts is equal to data.data, and we get the first entry in that array. What we'll do next is get rid of our description. We navigate back to our Home page and come and edit slug to say posts.attributes.title.

[3:49] Whenever we click on a post, we should have its title displayed on the next page in our browser. Clicking there gives us the title. We go back. Clicking there gives us the title, clicking there gives us the title. That is how you set up a dynamic page in Next.js 13 using the app directory.