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).