DEV Community

Sriram
Sriram

Posted on

What is trailingslash in next.js

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)

Collapse
 
hamzagorcevic profile image
Hamza Gorcevic

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

Collapse
 
konfydev profile image
Sriram

Amazing to see that. I had the exact same problem with it !