Usually, when you are doing static site generation out of nextjs, the route will be handled via nextjs (Thanks to Next Link). But, when you are trying to point a small division to link inside this might not work.
What's the issue:
Let's say you have a url, www.xyz.com/about. This will automatically handled by nextjs to be www.xyz.com/about/ . Can you see the difference ? yes. the "/" after "about" (/about/). This is what we call as "trailing slash"
What nextjs do here?
It automatically redirects things with trailing slashes to their counterpart (www.xyz.com/about) will be redirected to ( www.xyz.com/about/)
pages inside nextjs expects to render components with trailing slashes which might cause an issue here
How to solve it?
By adding trailingslash: true in next.config.ts
Want to read more about it ?
Here is the link - [(https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash)]
Top comments (2)
I had problem, when refreshing subroutes on my web it return "page not found 404",i tried everything to resolve problem, it was working on localhost:3000. After adding trailingSlash:true, everything was magicly solved
Amazing to see that. I had the exact same problem with it !