Next.js 用于静态导出的动态页面参数 [英] Next.js dynamic page params for static export

问题描述

我的页面依赖于路由参数(例如:slug)，例如 http://example.com/blog/:slug.此路由路径在我的 next.config.js 文件中正确定义:

I have page which depends on route params (ex.: slug) like so http://example.com/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' }
    }
  }
});

这在开发模式下运行项目时可以正常工作，但是一旦我将项目导出为静态，路由就无法访问，并且我从下一个收到常规 404 错误.

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.

有没有办法在不使用查询参数的情况下解决这个问题?http://example.com/?slug=123

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

此解决方案 https://github.com/zeit/next.js/blob/canary/examples/with-static-export/next.config.js 也是不可接受的，因为帖子来自后端 CMS

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

推荐答案

这是不可能的，因为 Next.js 静态导出生成静态 html 页面.如果您考虑一下，要使其正常工作，Next.js 必须以某种方式导出 url 段中有效的每个可能的字母组合，这根本不是一个好主意.

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 combination of letters valid in a url segment, which is not a good idea at all.

您可以获得的最接近的方法是使用查询参数和 as 属性，例如在链接到页面时:

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>

这只会在用户尝试链接或重新加载页面时中断，因为没有服务器端支持屏蔽.理论上，您可以使用 Nginx 或 Apache 代理(代理是正确的词吗?)从 /blog/SLUG_HERE 到 /blog/page?slug=SLUG_HERE 的请求.这留给你自己弄清楚.

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.

这篇关于Next.js 用于静态导出的动态页面参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！