Getting 404 on dynamic routes when not accessing from a <Link />

Bug report

Describe the bug

I’m getting 404 on production build when trying to first load a dynamic route. If accessing the route from a <Link href="/blog/[slug]" as="/blog/test">[...]</Link>, the page is correctly rendered.

To Reproduce

1. git clone https://github.com/zeit/next-learn-demo.git
2. cd next-learn-demo
3. cd 8-deploying
4. yarn
5. next build && next export
6. cd out
7. serve
8. Navigate to http://localhost:5000/p/learn-nextjs
9. See 404

Expected behavior

Load the dynamic route correctly, as if it was navigated from a previous page through <Link />.

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: 9.2.1

[jamesmosier]

According to the docs, depending on your use case, you may not need to use next export at all as next build is already enough thanks to Automatic Static Optimization.

Aside from that, try creating a next.config.js file and adding this exportPathMap:

module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': { page: '/p/[id]' },
      '/p/learn-nextjs': { page: '/p/[id]' },
      '/p/deploy-nextjs': { page: '/p/[id]' },
    }
  },
}

that way Next will know which route maps to which dynamic route. This example may also be helpful.

[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.