Custom route `post/`id` flashing 404 before finally rendering page.

I’m currently experiencing a problem with my post/:id routes where next flashes the 404 page before successfully rendering my component. At first, I thought this was a redux related issues as my post/id pages are checking the app state to filter whichever component should be shown using shallow routing.

After discussing this in the slack channel, I added another API call that would retrieve each blog post but quickly found that I still encountered the same issue. I know that this has happened for at least one other developer so i’m wondering if anyone can point me in the right direction? I’m trying to finish up this personal portfolio I built with next.

Below, you can see exactly what’s happening. Everything looks A1 except for that 404 that blinks whenever a specific post is rendered.

The benefits i’ve gained are tremendous however there have been some minor issues like this one that have got me a little puzzled 🤔 . Anyways, let me know if I can provide any additional info. Thanks 😄

[timneutkens]

So to answer this one once and for all:

href => path inside of the pages directory + the querystring as => rendered in the browser url bar

Example:

You have a url called /products/:id

1. You created pages/product.js

export default class extends React.Component {
  static async getInitialProps({query}) {
    console.log('SLUG', query.slug)
    return {}
  }
  render() {
    return <h1>The product page</h1>
  }
}

1. You add the route to express or any other server, this is only for SSR. What this will do is route the url /products/:id to pages/product.js and provide id as part of query in getInitialProps:

server.get("/products/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

1. For client side routing you use next/link like this:

<Link href="/product?slug=something" as="/products/something"> 

The reason you have to explicitly provide the href and as is that Next.js is not aware of any other pages on the client side. We don’t send a manifest of all pages to the client side and subsequent routes get lazy-loaded, which is scalable.

There is a community package that abstracts away providing href and as by sending a pre-defined manifest of all routes, note that we recommend not sending a full manifest of all possible routes as not doing this is more scaleable

https://github.com/fridays/next-routes

Also, note that rendering 404 is no longer the default behavior of Next.js. Instead, we reload the page for the Zones feature.

[morajabi]

It’s not fixed.