NextJS 13:动态路由在生产环境中无法正常工作

huangapple go评论48阅读模式
英文:

NextJS 13 : Dynamic routing is not working in production

问题

这是一个从本地模拟数据获取数据的代码片段:

export default function Blog({ params }: Props) {
  const blog_id = params.blog;
  const blog = blogsData.find((blog) => blog.id === blog_id);

  if (!blog) {
    return (<div>Blog Bot Found</div>)
  }

  return (
    <div className="">
      // 代码
    </div>
  )
}

这也是文件的路径:src/app/blogs/[blog]/page.tsx

在开发环境中,这可以正常运行。但是当我在 Vercel 上测试时,它返回 404 页面。

附注:一个奇怪的行为是,当我点击一个应该给我例如:https://host/blogs/cypress 的动态路径时,它会重定向我到 https://host/blogs/cyp ;

英文:

Here is a code snippet of how I fetch data from a local Mock Data :

export default function Blog({ params }: Props) {
const blog_id = params.blog;
const blog = blogsData.find((blog) =&gt; blog.id === blog_id);

if (!blog) {
    return (&lt;div&gt;Blog Bot Found&lt;/div&gt;)
}

return (
    &lt;div className=&quot;&quot;&gt;
      // Code
    &lt;/div&gt;
)}

Here's also the path to the file : src/app/blogs/[blog]/page.tsx

This works fine in the dev. But when I test it on Vercel, it returns 404 page.

P.S.: A weird behavior is that when I click on a dynamic path that is supposed to give me for example :
https://host/blogs/cypress. It redirects me to https://host/blogs/cyp ;

答案1

得分: 0

在我的 next.config.js 文件中,我有以下内容:

/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
    /* 配置选项在这里 */
    reactStrictMode: true,
    output: 'export',
}
module.exports = nextConfig
显然 `output: 'export'` 设置为生产环境会生成一个静态网站
英文:

In my next.config.js file I had :

/**
* @type {import(&#39;next&#39;).NextConfig}
*/
const nextConfig = {
    /* config options here */
    reactStrictMode: true,
    output: &#39;export&#39;,
}
module.exports = nextConfig

Apparently, setting output: &#39;export&#39; will generate a static website in the production

huangapple
  • 本文由 发表于 2023年7月12日 22:09:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76671500.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定