Error when deploying to Netlify because of 301 redirect with trailing slash

[benoitdemaegdt]

Hey there 👋

I'm currently building a website with Nuxt3 and Nuxt Content V2, but I'm facing an issue when deploying to Netlify.
Here is the website and the github project.

Very similarly to the official documentation, I try to fetch a document corresponding to the current browser URL 👇

const { path } = useRoute()

const { data: article } = await useAsyncData(`article-${path}`, () => {
  return queryContent('/blog')
    .where({ _path: path })
    .findOne()
})

This works great in dev mode, and in production when navigating using a NuxtLink.
However, when trying to refresh the browser on a page using this kind of query, the nuxt content query gets a 404 error.

After some investigations, this is because there is a 301 redirect from https://website.com/blog/article to https://website.com/blog/article/ (note the trailing slash). Because of this trailing slash, the query cannot find any content and there is a 404 error.

I tried to manually remove this trailing slash.

const { path } = useRoute()
const { withoutTrailingSlash } = useContent() // simple function removing trailing slash if exists
const { data: article } = await useAsyncData(`article-${path}`, () => {
  return queryContent('/blog')
    .where({ _path: withoutTrailingSlash(path) })
    .findOne()
})

This partially works : content is now rendered, but there is an ugly flash happening.

So I have two questions :

• Should withoutTrailingSlash be inside nuxt content ? It seems that it was recently added to the document driven mode (fix: remove trailing slash for document driven mode #1293 and fix(document-driven): update documentDriven feature #1294), why not for the "standard" mode ?
• Where does this trailing slash 301 redirect comes from ? Is it Nuxt3 behaving this way ? Why ?

Thank you for the amazing work 🙏

[benoitdemaegdt]

Problem suddenly disappeared. I am still not sure what was causing it, but 301 redirect to same url with trailing slash is no longer happening.
The solution might be to untick this option in Netlify.

I also added this middleware to avoid all trailing slash :
middleware/noTrailingSlash.global.js

import { withoutTrailingSlash } from 'ufo'

export default defineNuxtRouteMiddleware((to) => {
  if (to.path.endsWith('/') && to.path !== '/') {
    return navigateTo(withoutTrailingSlash(to.path, true), { redirectCode: 301 })
  }
})

Thanks @nathanchase for the tip.

✌️

[notflip]

I had the same issue and it was fixed by unticking the Pretty Url's in Netlify, didn't have to add middleware.