Client vs Server routing: different results based on path

[alexnm]

Here's an example folder structure (as silly as it may be)

pages/
  - subpage/
     - index.js
  - subpage.js

If I have a <Link/> point to /subpage/ the client will render the component from subpage.js, but when I refresh the page, I get the subpage/index.js file rendered.

At first I noticed this was an issue with the server routing not working well if the path ends with a /, but then I realized that there are cases in which you may want an index.js in a folder, so it's not necessarily problematic that you get a 404 when you don't have the index.js.

However, when there's a naming collision between a file and a folder, the client and the server behave differently and I think there should be a discussion around this situation, because I can't say there's a clear solution at this point.

[nkzawa]

I think it should work like node's require which prioritize subpage.js, and you can't have both subpage.js and subpage/index.js.

[alexnm]

In that case, this would fix the behavior (two lines added in server/resolve.js:

  if (i[i.length - 1] === sep) {
    return [
      i.slice(0,-1) + '.json', // removing the separator in case it's in the last pos
      i + 'index.json',
      i.slice(0,-1) + '.js', // removing the separator in case it's in the last pos
      i + 'index.js'
    ]
  }

should I make a PR with this?

[arunoda]

@alexnm go for it.

[nkzawa]

@alexnm Actually, it tries to mimic the behavior of require.

• requie('./subpage') prioritizes subpage.js
• require('./subpage/') prioritizes subpage/index.is

So I think we'd have to fix somewhere different.

[alexnm]

@nkzawa yes, but I think the browser behavior should be the same regardless of the url ending in / or not. Otherwise users will get a lot of errors when creating links in the applications.

And in this case the server should behave like the browser.

[nkzawa]

@alexnm yeah but I'm still not so sure about that since next.js is filesystem based API (not express-like routing). If you need it, you can do it using programmatic API.

[alexnm]

@nkzawa should we close this? I tried thinking of different approaches, but I see none that has no downsides.

[nkzawa]

I think it's still the problem since it should render a same page on client and server.

putting it all together:

For the url /subpage

• searches pages/subpage.js first
• searches pages/subpage/index.js second

For the url /subpage/

• searches only pages/subpage/index.js

This makes sense as filesystem based API and also is compatible with how require works, IMHO.

[Timer]

The latest version(s) of Next.js warn in this case. Once of the pages need deleted.

This will likely be an error sometime in the future (a major version):

$ /Users/joe/Desktop/scratch/test/node_modules/.bin/next build
[ warn ]  Duplicate page detected. pages/abc.js and pages/abc/index.js both resolve to /abc.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.