在 nextjs 上加载动态路由时出现 404

Question

我创建了一个动态路由，例如 [results].js

import { useRouter } from 'next/router'

const Post = () => {
    const router = useRouter();
    const { results } = router.query;

    return <p>Post: {results}</p>
}

export default Post

并配置我的 next.confi.js

module.exports = {
    trailingSlash: true,
}

它在开发模式下运行良好，但在生产模式下，我在 npm 运行导出后动态页面路由的唯一问题。当我浏览 htttps://my-domain/search/searchslog 它得到 404 错误页面。

Answer 1

next export 将预渲染所有页面并将您的应用导出为静态 HTML。对于您的动态路由，您需要使用 getStaticPaths 让 Next.js 知道要为该路由生成哪些 HTML 页面。

// pages/search/[results].js

export async function getStaticPaths() {
    return {
        paths: [
            { params: { results: 'result1' } },
            { params: { results: 'result2' } }
        ],
        fallback: false
  };
}

上面的函数会生成/search/result1和/search/result2页面。任何其他/serach/* 页面都会导致 404。