Next.js: pages/subfolder/ returns 404 for index page

[Christian24]

Hi,

I have one of my pages inside a subfolder called admin. I called it index, so that it would be rendered when I navigate to the root of the route in the browser. I would like routing in the browser to work like this: localhost/admin/ returns my page. However, instead I do get a 404.

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

Expected Behavior

I named my page inside of the admin folder index.js. I was expecting that navigating to /admin/ in a browser would lead to my page, just like navigating to the root of my project renders index.js located in pages folder.

Current Behavior

A 404 is returned instead of my page being rendered. Calling my page dashboard and navigating to admin/dashboard works fine though. I would like to see similar behavior to the index page located inside of the pages folder.

Steps to Reproduce (for bugs)

1. create a subfolder inside your pages folder
2. put any page there and call it index.js
3. navigate in your browser to localhost/subfolder/

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | 5.7.1 |
| node | 8.2.1 |
| OS | Mac OS |
| browser | Chrome |
| etc | |

[timneutkens]

Without the extra / at the end works afaik.

[Christian24]

You're correct. I would have expected it to work with the extra / too though.

[AlexanderThiele]

I also find this a strange behaviour! Any workarounds?

[michaelmota]

Same problem over here. Any workarounds for this?

[ViableClanMember]

Hi same problem here, was scratching my head for a while. I plan to try out https://github.com/revskill10/next-routes-middleware to see if that can help. Users are dumb and someone will enter it with the slash, and on my computer it just spins for ages but never loads.

[iamyojimbo]

so if calling with the / leads to a 404 if you are looking to load the index page, what would I have to call a page filename in that subdirectory to be loaded when the route is called with the /?

_PS: Alarm bells are ringing for me that there isn't more activity on this issue, suggesting that we're thinking about this in the wrong way..._

[kiliman]

Like others, I'm not sure what the "correct" way should be, but it seems odd that next.js doesn't support URLs with trailing slash out of the box.

Anyway, I came up with a workaround. I updated the file _error.js and added a check to see if it's a 404 and URL ends with /. If so, redirect to URL without the slash.

// pages/_error.js

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

Error.getInitialProps = ({ req, res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  const url = req.url
  // HACK next.js returs 404 on routes ending with /
  // even if the folder contains an index.js page
  // so redirect to url without /
  // e.g. /account/ => /account
  if (statusCode === 404 && url.endsWith('/')) {
    res.writeHead(302, {
      Location: url.slice(0, -1),
    })
    res.end()
    return
  }
  return { statusCode }
}

export default Error

[ccorda]

To anyone who stumbles on this, this is now supported:

With Next.js 9.5 we have introduced a new option called trailingSlash to next.config.js.

// next.config.js
module.exports = {
  // Force a trailing slash, the default value is no trailing slash (false)
  trailingSlash: true
}

Documentation:
https://nextjs.org/docs/api-reference/next.config.js/trailing-slash