Strapi NextJS Tutorial throws errors when navigating to a Blog Post

Questions and Answers
1
System Information
  • Strapi Version: v3.6.8
  • Operating System: Win10
  • Database: SQLite
  • Node Version: v14.16.0
  • NPM Version: 6.14.11
  • Yarn Version: 1.22.10

Hello,

I’m new to Strapi but thought it looked like a good headless CMS for my website. So I have just ran through the Strapi NextJS Tutorial from the tutorials section: “Build a blog with Next (React.js) and Strapi”

It works nearly perfectly but React throws an error everytime I click on a blog post from the homepage, that error stays on screen until the blog post is fetched and loaded and then it’s like nothing was wrong.

I’m wondering if this is a common issue? Or maybe either Strapi and/or Nextjs has been updated since this tutorial was written and so it’s a new runtime error that hasn’t been accounted for?

I’ve included a screenshot of what appears for about 1 second on screen before the blog post is loaded and the route changes. I tried to quickly copy and paste the error in text but it disappears too quickly. Here is the screenshot:

strapi-nextjs-tutorial-error
strapi-nextjs-tutorial-error1853×1010 97.5 KB

Does anyone know what that error is telling me? I’m at a loss as to where to start looking to find the solution. Any help would be really appreciated!

Thank you

2

Update:

So it looks like the issue is with card.js in the <Link> component. The as part seems to be the bit confusing Next before it loads it in:

<Link as={`/article/${article.slug}`} href="/article/[id]">

I’ve removed the as and changed href to: <Link href={`/article/${article.slug}`}> and that seems to work now! But now my question is…why use as in the first place? And when using as why does href have [id]? There is no [id].js file anywhere, just [slug].js so I’m a bit confused. Any help would be very appreciated!

Thanks