Dynamic routes cause 404 when used as entry point in exported app

[neefrehman]

Bug report

Describe the bug

I'm running into some problems with dynamic routes. When running next start everything is working fine, however after next export my dynamic routes are only working after client-side navigation, and I'm getting a 404 whenever those pages are the entry point to the app.

The docs for Static HTML Export suggest that dynamic routes should work as normal:

The exported app supports almost every feature of Next.js, including dynamic routes...

I'm not using get(Initial|Server|Static)Props in the file, but am using dynamics imports via React.lazy (I've also tried with next/dynamic, but am having the same issue).

I'm also connecting this issue to https://github.com/zeit/now/issues/3294, as I think it's more of a Next issue than a Now one (It's reproducible when running a SimpleHTTPServer locally, and when hosted on Netlify).

To Reproduce

I've created a simplified version of my site to showcase the issue:

1. Go to https://5eaea1eabea3d2000728ab2d--generative.netlify.app/ — (Repo)
2. Click on any of the links on the homepage
3. See working dynamic route with rendered text
4. Refresh page
5. See 404 page

Expected behavior

The dynamic route should render the page as normal even, when used as entrypoint to the app.

System information

• OS: MacOs
• Version of Next.js: 9.3.6
• Version of Node.js: 10.20.1

Additional context

[neefrehman]

UPDATE: thanks to this comment: https://github.com/zeit/now/issues/3294#issuecomment-623211223 I've figured out that the issue was a lack of an exportPathMap. I've created one in next.config.js and this fixes the issue.

I'm now trying to refactor the solution to work with getStaticPaths instead, as that would have the same result and allow me to remove some other js from runtime, but I'm running into this error:

Error: A required parameter (sketch) was not provided as a string in getStaticPaths for /[sketch]
    at /Users/neef/Desktop/generative/node_modules/next/dist/build/utils.js:22:681
    at Array.forEach (<anonymous>)
    at /Users/neef/Desktop/generative/node_modules/next/dist/build/utils.js:22:486
    at Array.forEach (<anonymous>)
    at buildStaticPaths (/Users/neef/Desktop/generative/node_modules/next/dist/build/utils.js:18:1183)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.isPageStatic (/Users/neef/Desktop/generative/node_modules/next/dist/build/utils.js:25:542) {
  type: 'Error'
}

The array I'm mapping to create the paths is definitely array of strings. I've even tried the following code to make sure of it, and am still having the same issue. Full simplified code for the page is here.

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: ["030520", "040520", "050520"].map(sketchId => ({
            params: { id: sketchId }
        })),
        fallback: false
    };
};

Is there anything I've misunderstood about getStaticPaths? If this is too unrelated to the first issue I'm happy to open a new one.

[ijjk]

@neefrehman the params need to match the expected param names from the dynamic page. So where you are using id here you need to use sketch to match the dynamic page's params.

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: ["030520", "040520", "050520"].map(sketchId => ({
            params: { sketch: sketchId }
        })),
        fallback: false
    };
};

[neefrehman]

@ijjk Thanks for the response and answer. I can see that note in the docs now. Closing issue as problem is resolved.

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