javascript - Next.js dynamic page params for static export - Stack Overflow

admin管理员组

文章数量:1313006

I have page which depends on route params (ex.: slug) like so /:slug. This route path is defined properly in my next.config.js file:

module.exports = withPlugins(plugins, {
  exportPathMap: (defaultPathMap) => {
    return {
      '/': { page: '/home/home' },
      '/blog/:slug': { page: '/careers/careers' }
    }
  }
});

This works fine when running the project in dev mode but once i export the project as static the route is not accessible and i get the regular 404 error from next.

Is there a way to fix this without using query parameters? /?slug=123

This solution .js/blob/canary/examples/with-static-export/next.config.js is also not acceptable since the posts e from backend CMS

I have page which depends on route params (ex.: slug) like so http://example./blog/:slug. This route path is defined properly in my next.config.js file:

module.exports = withPlugins(plugins, {
  exportPathMap: (defaultPathMap) => {
    return {
      '/': { page: '/home/home' },
      '/blog/:slug': { page: '/careers/careers' }
    }
  }
});

This works fine when running the project in dev mode but once i export the project as static the route is not accessible and i get the regular 404 error from next.

Is there a way to fix this without using query parameters? http://example./?slug=123

This solution https://github./zeit/next.js/blob/canary/examples/with-static-export/next.config.js is also not acceptable since the posts e from backend CMS

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Mar 25, 2019 at 14:16 prototype asked Mar 25, 2019 at 14:04 prototypeprototype 3,31322 gold badges2929 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is not possible because Next.js static export generates, well, static html pages. If you think about it, for this to work Next.js would somehow have to export every possible bination of letters valid in a url segment, which is not a good idea at all.

The closest you could get is using query parameters and the as attribute, for example when linking to a page:

<Link href='/blog/page?slug=SLUG_HERE' as='/blog/slug'>
  // Link content here
</Link>

This only breaks when the user tries to link to or reload the page because there is no server-side support for the masking. You could theoretically use Nginx or Apache to proxy (is proxy the right word?) requests from /blog/SLUG_HERE to /blog/page?slug=SLUG_HERE. This is left up to you to figure out.

To handle dynamic paths in your next js project (provided you are going through the export route!).

• Ensure trailingSlash is set to false or not defined at all in your next.config.js file

This way, every request will land in the index ponent, and from here, you can just handle your path redirect.

if (window.location.pathname !== "/") {
   Router.push(window.location.pathname + window.location.search);
}

Ensure your project is mounted before doing this (e.g do this with useEffect hook)

本文标签： javascriptNextjs dynamic page params for static exportStack Overflow