Set up Dynamic Pages in Next.js 13 App Directory and Query with Page Slug
We want to navigate to a post page using the dynamic pages feature of Next.js. We'll do this by creating a dynamic page that will use the slug of the post to fetch the post from Strapi and display it on the page.
To do this we'll start by creating a new page called [...slug]/page.js. This will create a dynamic page that catches all routes that are not statically defined. On this page, we can access the slug from the params prop and use it to fetch the post from Strapi.
We can pass the slug to a function called getPage that will set the slug as a filter on our query to Strapi to only get the posts that match the slug (it's unique so this will always return one post).
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.