Intermittent issue with dynamic routes using Nuxt and NetlifyCMS

Support
, ,
1

Hey everyone :wave:

I’m new here so sorry if this ends up being a rambling, stupid question! I’m not even sure if it’s a netlify issue.

The background

I’m using NetlifyCMS to power a blog on my site, built using Nuxt.

As per the Nuxt docs, I’m defining the routes in the nuxt.config.js:

Like so:

generate: {     
    async routes () {
      const { $content } = require('@nuxt/content')
      const files = await $content('blog').only('slug').fetch();
      return files.map(file => `/${file.slug}`);
    }
  }

when I run npm run generate (which is the build command I’ve configured netlify to use) locally the routes are simply: /post-slug-here.

In netlify’s deploy details in the “new pages include” list I get: what-is-financial-literacy/index.html which is correct - the slug of one of my blog posts made using NetlifyCMS.

The issue

When I go to my live, deployed site: https://www.wealthampd.com/blog/, the posts listed are linking to /blog/post-slug-here as opposed to just /post-slug-here so they’re 404ing.

For transparency I’m using the NuxtLink component on the blog index page:

like so:

   <NuxtLink :to="post.slug">Read more</NuxtLink>

What is really odd though, is if you go to an individual post e.g.

https://www.wealthampd.com/what-is-financial-literacy/

and then go back to the blog index page, the links will be pointing to the correct place…

:ghost: Spooky, right?

The end

Sorry that this is so rambly, but I’m completely lost as to what is going on here. I might be completely missing the point and I’m not 100% sure this is a netlify problem or a nuxt problem or a me problem. Thanks for reading :slight_smile:

2

Just thought - wonder if I could set up a redirect from /blog/slug to /slug as a workaround?

3

I’ve added a redirect:

/blog/* /:splat 301

but it’s now redirecting /blog to / :anguished:

4

When going directly to

www.wealthampd.com/blog

the redirect kicks in to the homepage (www.wealthampd.com)

if you use the menu (top right) to go to the blog, the redirect doesn’t do anything (which is intended)

I’m sure this will be some sort of config issue that I’ve failed to set up but unsure what it could be.

I’ve checked the redirect guide and have downloaded a .zip of my latest deploy to check the _redirects file but it all looks sensible to me.

5

This rule will also catch /blog/, which is the main blog page.

You can add a redirect rule above this: /blog /blog 200! as redirects are read chronologically.

Otherwise, I think you’ll want to check out the Nuxt configuration as to why they’re sitting under /blog in the first instance. It may be related to this setting but, alas, my knowledge of Nuxt is limited!

1 Like
6

Thank you so much @Scott! :pie: I’ve just updated my _redirects file and have tested it live and it looks like we’re all good now.

Ah that’s such a relief, thank you again. :blush:

1 Like