Next.js: [Nextjs 9] 404 on dynamic routing for browser generated requests

[steveswork]

Bug report

Describe the bug

Getting 404 when requesting day/two/12345 against the day/two/[time].js route. But requesting day/12345/two against the day/[time]/two.js works.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create day/two/[time].js directory structure in the page folder
2. Create and export a react component from inside the [time].js file
3. In the browser, type /day/two/12345 and press enter

Expected behavior

Render a page containing the output of the [time].js file component

System information

• OS: Windows
• Browser: chrome
• Version of Next.js: 9
  

  Additional context

Running a poc via codesandbox

[dan-cooke]

This could be related to a bug we saw in next-routes:
https://github.com/fridays/next-routes/issues/296

Try writing the query slug as a traditional query param instead.

ie.

day/two/[12345] becomes day/two?time=12345 and you'll see the page work as expected.

[steveswork]

@dan-cooke According to @joci933, the query string approach also fails with browser refresh. Is there no way to get the path variables to work as described in the docs?

[Joci933]

@steveswork Try with Next Router

Create a routes.js

const routes = require('next-routes')`
module.exports = routes()
.add('days','/day/two/:time', 'days')

[steveswork]

@Joci933, how compatible is next-routes with Nextjs 9?

[natkaratkova]

@steveswork can you check if you still have this issue? the page /day/two/12345 works for me in your codepen example

[steveswork]

@meuwka, can you share a link to your codepen example? codesandbox is now throwing 502 for my example

[natkaratkova]

@steveswork I meant codesandbox, just forked yours https://codesandbox.io/s/hello-world-e2lwv Preview https://e2lwv.sse.codesandbox.io/day/two/1234

[steveswork]

@meuwka, it is working correctly now. Many many thanks!

[llamerr]

When I update route to /day/[two]/[time] and use day/123/123 it stops working

[jhosseptmromero]

Only you need use href and as props example:

<Link  href={'/events/[eventId]'}
            as={`/events/${event.id}`}>
         <a>Go to Events</a>
</Link>