Next.js: Routing error for urls with trailing slash since 5.0.0

[hyperborea]

• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Both URLs /foo and /foo/ should render the contents of /pages/foo/index.js.

Current Behavior

/foo works fine, but /foo/ causes a 404 error on SSR and only reconciles later at client side rendering.

Steps to Reproduce (for bugs)

1. create minimal next.js project
2. create /pages/foo/index.js including e.g. export default () => <div>hello world</div>
3. test url /foo/, should throw 404 on SSR

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | 5.0.0 |
| node | 8.9.0 |

[timneutkens]

Fixed in next@canary

[fionawhim]

@timneutkens I can reproduce this bug in canary 6.0.0-6.

[lkbr]

Unless I'm mistaken, I don't think this is fixed in 6.0.0-canary.6. I've tried to produce a minimal example to demonstrate.

page | url | client | server
--|--|--|--
/pages/simple.js | /simple | ✅ | ✅
/pages/simple.js | /simple/ | ✅ | 404
/pages/nested/index.js | /nested | ✅ | ✅
/pages/nested/index.js | /nested/ | ✅ | 404
/pages/blog.js | /blog/first (parameterized route copied from example | ✅ | 404

• live example: https://next-slashes.now.sh/
• code: https://github.com/lkbr/next-slashes

It is my understanding that the last 2 - "/pages/nested/index.js" and "/pages/blog.js" should not 404 on the server.

[kheruc]

I can also confirm the bug.
For my production site, I "fixed" it by redirecting urls with slashes to urls without them using this code in nginx config:
rewrite ^/(.*)/$ /$1 permanent;
Not sure if redirects are possible on Now, I use a custom server.

[mydearxym]

still not fix in next 6.x

[NathanielHill]

This is fixed :tada:
https://zeit.co/blog/new-static-deployments

[lkbr]

That's great but I believe that doesn't help non static deployments or apps not hosted with Now.

[NathanielHill]

Ah, good point on static apps hosted elsewhere. I've never had a trailing slash issue with dynamic deployments, so this fixes the problem for me and likely several other people.

[eugeneross]

@timneutkens any status when this will be fixed for non-static deployments / static deployments hosted elsewhere?

[iamstarkov]

I filed a new issue with minimal reproducible repository in #5214

[aluminick]

If you want trailing slash, you can just do this. <Link href='/about' as='/about/'><a>about</a></Link> but if you're using fridays/next-routes this is not possible. So I have a fork where you can add trailingSlash as prop. Hope this helps!

[aripekkako]

This is still not working in [email protected]

/pages/nested/index.js | /nested/ | ✅ | 404
-- | -- | -- | --

[reginpv]

That's great but I believe that doesn't help non static deployments or apps not hosted with Now.

Having this issue now

[Shaquu]

@reginpv what is your config in _next.config.js_?
For me setting _trailingSlash_ to _false_ made that work.

[reginpv]

@Shaquu Looks like updating to latest fixed this for me, I'm not seeing the issue now. Will continue to monitor and if ever saw the issue again will report

[RobertoPrevato]

I am seeing the same issue now, but only when I refresh the page. It's even funnier, because I am using a project template with TypeScript, that for some reason always adds a trailing slash to the paths defined in Link components.

For example: I write Link href="/about", it gets changed to "/about/". It works when I navigate, but then if I refresh the page, the route doesn't match anymore the "about.tsx" page, or "about/index.tsx" (doesn't make a difference). I don't see the same issue when using the default starter template with ES.

[otospector]

why this issue closed? anyone have a good advice for handle trailing slash

[Timer]

See https://github.com/vercel/next.js/issues/5214