Create Next.js dynamic pages
One of the main benefits of using Next.js is the smooth way to setup dynamic pages.
In our pages folder, create a new folder and file called blog/[slug].js. The brackets are what tell Next that the file is going to be a dynamic page.
Here we are going to use an almost duplicate getStaticProps function that we created in the previous lesson. The difference is we are going to be bringing in our page context to fill out the right page data.
Lastly, we will loop over all of our posts using a for loop.
Instructor: [0:01] We want to leverage a feature of Next.js called dynamic pages to dynamically create pages for each entry in our Strapi posts collection type. [0:13] To do that, we'll open our Explorer. In our pages folder, we'll create a new folder called blog. We'll create a new folder called slug.js. Slug in this case will be our dynamic object and we'll save that.
[0:34] Inside this we'll define a getStaticProps. We'll go to our index.js and copy our getStaticProps, because they're pretty much the same. We'll close that. The exception here being we add our page context in the form of CTX, which we'll use to filter out the right page data. Also, define a variable called page data and initialize it as an array.
[1:16] We'll then use a for loop to make sure that we're displaying the correct data in our page. To do that, we'll define a variable called index, assign it the value of zero. Index is less than data.posts.data.length, and then index++.
[1:58] Then here's where we do the app flow checking and say data.posts.data at a specific index as we iterate through our response. Then we check the slug of each entry in the response array and see if that is equal to the slug of the page we are currently on.
[2:33] When we do satisfy that condition, we then assign page data, the value of that specific object. That means the props will return, be equal to page data. Because our blog is statically generated, we need to define a getStaticPaths function that tells Next.js of every available path for the blog entries inside Strapi.
[3:16] We'll paste here, I'll getStaticProps. I will change this to getStaticProps because they follow a similar format. We'll initiate our Apollo Client and we run our query. This time, we don't need all this data. We mostly need our slug and author, and so I'll take those out.
[3:41] Then what I want to do after this is define PATH, the variable. We'll say constPaths where you go to data.posts.data. Then we map that and defined our params.
[4:12] We have a slug property which we'll assign post.attributes.slug, and then post property which we'll assign post.attributes, so we are aware of what data in our page. In our return object, we change props here. Get rid of that and replace it with Paths and add a fall back as false. That is how you set up Next.js dynamic pages.
Great feedback on naming. On filtering, there are some work arounds with the API but didn't want to concentrate on that in this iteration, I'll be adding a couple supplementary lessons and will get to those parts. I'll definitely improve the other parts of the course when a couple Next 13 I have my eyes on go stable. Hope you enjoyed the course!
A couple of marks: