Problem Statement
How do you create a dynamic blog post page that uses getStaticPaths and getStaticProps together?
Explanation
Create a file like pages/blog/[slug].js where getStaticPaths fetches all possible blog post slugs from your CMS or filesystem and returns them in the paths array with params: { slug: 'post-1' } format, and set an appropriate fallback strategy.
Then getStaticProps receives the slug from context.params, fetches that specific post's data from your CMS or API, and returns it as props to the page component which renders the blog post content.
Handle fallback states by checking router.isFallback in the component to show a loading state when fallback is true, and implement error handling for invalid slugs by returning notFound: true from getStaticProps.
Add ISR by including revalidate in getStaticProps return to update posts periodically, and consider using fallback 'blocking' if you frequently add new posts to generate them on-demand without rebuilding the entire site.
Practice Sets
This question appears in the following practice sets: