NextJs Trailing Slashes

Has anyone figured out how to actually set up URL’s correctly with NextJS on Netlify? We have tried everything, but nothing works. No matter what we do, Netlify serves both the page/ and page urls (with and without the trailing slash) for every Next JS website. There seems no possible way to properly set up a NextJS website on Netlify. First we tried, trailingSlash: true in next.config.js, and used Pretty URL’s for Netlify in the Deploy settings. This does nothing. Then we removed trailingSlash and used Pretty URL’s, hoping that Netlify would redirect everything to the /. But, no, since we are using NextJs, the URL’s go to page also (no trailing slash), and override Netlify Pretty URLs. Then we tried trailingSlash: true and unset Pretty URL’s. No luck again. There is no combination that will work. Extremely frustrating, especially since whatever works locally, will NOT work on Netlify NextJS and we keep having to publish our site to test every single combination of settings. All we want is something consistent. Either redirect all page/ to page or redirect page to page/. Either one. Anyone know how to do this?

2 Likes

hey there @osseonews - sorry to be slow to reply. I don’t actually have an answer for you at this time, but, i am hoping to bring this up to one of our nextjs pros soon, and will report back once i have spoken to them. thanks for your patience!

1 Like

hi again! So, we took a closer look at this with a next js pro and we weren’t able to reproduce what you are seeing, but it’s also possible that we are misunderstanding each other.

As far as we can tell, next (in general) doesn’t seem to be doing anything funny with trailing slashes. Could you check out this very barebones demo that basically has the config you are looking for and tell us if this is what you are looking for?

https://research-nextjs-blog.netlify.app/post/demo-post-1

Similar issue here, but I did notice that my statically generated pages do work as expected (301 redirect from whatever/ to whatever) with the Next.js default (trailingSlash: false). But it doesn’t work as desired with a page that has revalidate enabled (I think this is an ISR page).

I can’t tell if the original question was with a similar circumstance, but perhaps this would require some code to do the redirect in some lifecycle of the live request?

Thanks for your reply. I checked your barebones demo and you are not using trailingSlash in your Next Config , so it doesn’t show anything. Try using trailingSlash and then see the results. It’s won’t work on Netlify. Here is the documentation: next.config.js: Trailing Slash | Next.js - As per my original post, there is no possible way on Netlify to use a trailing slah with NextJs, Netlify does not respect it and you end up having duplicate urls, one with slash and one without. The only way we could get this to work, btw, is not use the trailingslash (like in your demo), which required us to rebuild our entire site, as it used a trailing slash. Was a massive pain. Some sites use a trailing slash, and if so, they cannot be ported to Nextjs on Netlify. You end up having to use Vercel. You can read other posts about this. It’s not just our issue. redirect - Trailing slash for Next.js on Netlify not working - Stack Overflow

Hello,

I have exactly the same problem, as explained in the StackOverflow question.

My site has always used the trailing slash and I am planning to migrate to Netlify. This will either imply dropping the trailing slash (generating a ton of 301) by using pretty_urls = true, or client-side redirects which I really want to avoid.

Note that from my tests, it works as long as you don’t use target: "serverless" in your next.config.js, which is what I want to use in this case.

Any way to fix this? Seems like such a simple issue!

I don’t see anyway to fix it right now. We had to drop all our trailing slash URLs on one site and do redirects. We have another site where this will be basically impossible due to the volume of content, so we may have to just use Vercel for traling slash = true, even though we like Netlify alot more. The issue is that Next on Netlify is basically still not 100% complete, and there are features you can’t use properly (static . Hopefully, over time more features will work properly.

hey @osseonews - i saw you found this issue:

thanks for commenting on there - I know that this is an annoying bug at the moment, but we will definitely get to fixing it when we can. The best way to hear about that fix is to subscribe to that thread, so you will get notified right away.

I’m sorry all - i wish i had a fix for you right now! Hopefully soon.