Search code examples
urlgatsbyslug

Gatsby slug next/previous issues after adding `/blog${node.fields.slug}` to createPage

I am experiencing something strange and I have tried many work-arounds with no prevail.

I am trying to append "blog" to my templates' urls like so..

createPage({
      path: /blog${node.fields.slug}, // this line
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })

Which works fine. So I used the same approach to account for the next/previous Links.

<Link to={blog${next.fields.slug}} rel="prev"> (next example)

But when I go to an article e.g. blog/category/hello-category and try to click on a next or previous article e.g. /blog/category/hello-category2, the path is appending the current path and the next path - like so.

/blog/category/hello-category/blog/category/hello-category2

Can anyone help?

Thanks in advance.

Solution

  • The missing leading slash was causing this issue.

    <Link to={/blog${next.fields.slug}} rel="prev">

    "Without the slash in the beginning it assumes links are relative to the root. It behaves same as normal HTML links in this regard. "