404 error flashes when rendering custom routes on clientside

[shanedaugherty]

404 error flashes when rendering custom routes on clientside

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

Related issues:

#2208
#2833

Expected Behavior

• Routes to render correctly on both client and server.
• Be able to define a link using next/link with only one prop, href, which contains the actual url.
• Define routes in one place.

Example route: /posts/:id.

Current Behavior

• The next/link component requires manually passing url parameters. This can be a bit inconvenient when attempting to navigate to a url string from a json response.

For example, if you have a simple blog backend that outputs a json response:
{ "posts": [{... "link": "/posts/my-first-post"}] }

Doing something like this does not work:
posts.map(post => <Link href={post.link} />)

The link will go to a 404 page and then it seems like the browser does a full reload and it gets rendered properly by the server.

Ideas

• Allow custom routes to be defined in next.config.js and have the framework configure them

next.config.js

{
  routes: [ ... { route: '/posts/:slug', component: '/posts/single' } ]
}

Somewhere in const { prepare } = require('next')

config.routes.forEach(({route, component}) => {
  server.get(route), (req, res) => {
    app.render(req, res, component, req.params);
 }); 
})

[sergiodxa]

That's the expected behavior, it's a low level API so you can build on top of it and combine it with any library.

If you want something more high level check https://www.npmjs.com/package/next-routes which works similar as you described.