英文:
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) => blog.id === blog_id);
if (!blog) {
return (<div>Blog Bot Found</div>)
}
return (
<div className="">
// Code
</div>
)}
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('next').NextConfig}
*/
const nextConfig = {
/* config options here */
reactStrictMode: true,
output: 'export',
}
module.exports = nextConfig
Apparently, setting output: 'export'
will generate a static website in the production
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论