next.js - NextJS 路由在不使用 Link 时给出 404

Question

我有一个 Next.js 页面，其中页面是静态生成的（使用next export）。这是一条动态路由，但我只会在初始页面加载后（在 a 中useEffect）在客户端上获取数据。

路径类似于：/pages/foo/[id].tsx. 这实际上是唯一存在的路线。

我的问题是：

• 如果我直接访问 URL（例如在 URL 栏中输入https://mysite.fake/foo/1337），我会得到 404。
• 如果我使用 a 导航到该路线，<Link />它会按预期工作
• 如果我然后重新加载页面，我会再次收到 404。
• 在本地开发中，它工作正常。该问题仅在部署时存在。

有问题的页面正在使用router.query，但我对完全静态的页面（例如只是/pages/bar/baz.tsx）有同样的问题。

例子：

export const Home: NextPage = () => {
    const router = useRouter()
    const { id } = router.query

    const headerText = id ? `Hello ${id.toString()}` : ''
    
    // in a later iteration, I will use the query id to fetch data in a useEffect

    return <h1>{headerText}</h1>
}

据我从关于动态路由和数据获取的 Next.js 文档中了解到，这应该是可能的。

我next.config.js的很光秃：

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
}

我究竟做错了什么？

标签： next.jsnextjs-dynamic-routing