NextJs:带有动态路由的静态导出

时间:2021-01-13 13:01:45

标签: azure next.js

我正在 Azure 上部署我的 Next.js 应用程序,如果我导航到模块页面(例如 www.site.com/overview),它会在页面刷新时抛出 404。

我已按照此处的 azure 部署指南进行操作 - https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs

但是它有一些相互矛盾的建议,它说使用 next build && next export 导出它并动态映射路由以避免 404 错误,但是当我这样做时 Next.js 抛出一个错误:

Error occurred prerendering page "/modules/emergency-closing". Read more: https://err.sh/next.js/prerender-error
Error:
Error: you provided query values for /modules/emergency-closing which is an auto-exported page. These can not be applied since the page can no longer be re-rendered on the server. To disable auto-export for this page add `getInitialProps`

导出应用程序并在 Azure 上运行它的正确方法是什么?

next.config.js

    const modules = require('./data/modules')

    module.exports = {
      trailingSlash: true,
      async exportPathMap() {
        const paths = {
          '/': { page: '/' },
        }
        //
        Object.keys(modules).map((module) => {
          paths[`/modules/${modules[module].slug}`] = {
            page: '/modules/[moduleSlug]',
            query: { moduleSlug: modules[module].slug },
          }
        })
    
        return paths
      },
    }

modules.js

    module.exports = {
      overview: {
        id: 6,
        name: 'overview',
        slug: 'overview',
      },
      'special-features': {
        id: 1,
        name: 'Special features',
        slug: 'special-features',
      },
      diagnosis: {
        id: 3,
        name: 'Diagnosis',
        slug: 'diagnosis',
      },
      'emergency-closing': {
        id: 4,
        name: 'Emergency closing',
        slug: 'emergency-closing',
      },
      'side-window-settings': {
        id: 5,
        name: 'Side window settings',
        slug: 'side-window-settings',
      },
    }

package.json

      "build": "next build && next export",

0 个答案:

没有答案