Nuxt Content api results in 404 error

Support
1

Hi everybody,
I switched from nuxt2 + nuxt content to nuxt3 + nuxt content for my personal website (https://www.bazinga.it/) and locally everything is working fine.
Also, the local builds with nuxt generate and nuxt preview are working fine.

On netlify, builds are completing with success but navigating the site produce an error whenever I refresh a page or I land on an internal page.
See for example https://www.bazinga.it/blog/passo-giau/
the page is loading correctly but on hydrating the content disappears. If you look at the console, there is a generic error: TypeError: (intermediate value)(...) is null but I think this is just a consequence of another error, a 404 on nuxt content api, in fact:
https://www.bazinga.it/api/_content/query/l4p205iohm.json?_params={"where":[{"_path":"/blog/passo-giau/"}],"first":true,"sort":[{"_file":1,"$numeric":true}]}&previewToken= results in a 404 error.

I know for sure that the file is generated by the build, but somehow netlify can’t find that file.
Is there a configuration for netlify to make it work?

thanks, Marco

2

Sorry for the delay.

I think whatever is happening is a JaaScript error because as soon as you disable JS, the page loads fine. Since Nuxt is making the JS files for your site, it’s worth reach out to them to ask about this issue.

3

Old post but for others finding this via google…

@radel - I fought with this bug for several days and while I think there were several problems I was dealing with, one of them was that netlify is automatically adding trailing slashes when hitting the url directly (ie /path → /path/). I realized I could recreate that issue locally by adding the trailing slash manually.

Some of how nuxt content fetches data is affected but other things are not. For example, fetching the post looks for the path internally calls queryContent('/path/').findOne() which works with or without the slash. But fetching the surround data requires the full path, and is sensitive to the extra slash.

I believe I also had some issues with using document-driven mode and useContent, as well as some of the default data fetching done by <ContentDoc>.

In the end something like this solved my issues:

const route = useRoute();

// remove trailing slash from path
const actualPath = route.path.replace(/\/$/, '');

const { data } = await useAsyncData(`post-${actualPath}`, () =>
  Promise.all([
    queryContent(actualPath).findOne(),
    queryContent('/blog/')
      .where({
        navigation: { $ne: false },
        draft: { $ne: true },
      }) // skip posts with `navigation: false` or `draft: true`
      .only(['_path', 'title'])
      .sort({ date: 1 })
      .findSurround(route.fullPath.replace(/\/$/, '')),
  ])
);
const post = computed(() => data.value?.[0]);
const prevPost = computed(() => data.value?.[1]?.[0]);
const nextPost = computed(() => data.value?.[1]?.[1]);
4

Hi @theo :wave:t6: ,

Thanks for coming back and sharing this with the community. These insights are super helpful and will certainly help other members who experience simple problems. (:

5

I had the same issue and got it fixed by using router strict mode in the nuxt config :

  router: {
    options: {
      strict: true,
    },
  },

Also make sure you have not checked the “pretty url” post processing option in netlify project config (which adds trailing slashes)

1 Like
6

Hi @Brewal thanks so much for sharing our solution.

7

You might have to specify NITRO_PRESET=netlify-edge in your environment to get nitro to generate functions that will handle the /server/api endpoints, and by extension, the /api/_content endpoints that are needed to use dynamic queries for nuxt content when deployed to netlify.