Nextjs 动态路由与 next-i18next 构建错误 [英] Nextjs dynamic routes with next-i18next build error
问题描述
我有一个将使用 id 参数呈现的编辑页面,它在应用程序运行时工作正常,但在构建 nextjs 应用程序时出现此错误
<块引用>[错误:ENOENT:没有这样的文件或目录,重命名'C:\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\export\en\companies\edit[id].html' ->'C:\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\server\pages\en\companies\edit[id].html']
完整错误
我不确定这个错误与什么有关,或者我在我的代码中犯了什么错误,这个错误是在构建期间发生的.
这是我的页面代码
import { WithAuthorization } from 'common/roq-hocs';从布局"导入 { MainLayout };从'next-i18next'导入{useTranslation};从'next-i18next/serverSideTranslations'导入{ serverSideTranslations};import React, { FunctionComponent } from 'react';从视图/公司编辑"导入 { CompaniesEditView };const CompanyCreatePage: FunctionComponent = () =>{const { t } = useTranslation('companiesEdit');返回 (<MainLayout title={t('title')}><授权permissionKey="companys.update";失败组件={<div className="mt-16 text-2xl text-center text-gray-600"><span>{t('noView')}</span>
}><公司编辑视图/></WithAuthorization></MainLayout>);};export const getStaticProps = async ({ locale }) =>({道具: {...(等待 serverSideTranslations(locale, ['common', 'companiesEdit'])),},});export const getStaticPaths = () =>({路径:['/companys/edit/[id]'],后备:真的,});导出默认的 CompanyCreatePage;
我认为问题可能在于您没有在 getStaticPaths
函数中返回预期的 paths
模型.
此页面的最小示例:
import { GetStaticPaths, GetStaticProps } from 'next';从下一个/路由器"导入 { useRouter };const CompanyCreatePage = () =>{const 路由器 = useRouter();const { id } = router.query;返回 (<div><h1>公司为 ID 创建页面内容:{id}</h1>
);};export const getStaticPaths: GetStaticPaths = async() =>{//通过 API、文件等获取所有可能的 'id' 值.const ids = ['1', '2', '3', '4', '5'];//例子const 路径 = ids.map(id => ({参数:{id},}));返回{路径,回退:假};};export const getStaticProps: GetStaticProps = async context =>{返回{道具:{}};};导出默认的 CompanyCreatePage;
然后,导航到页面/users/edit/3/
返回如下内容
考虑到 getStaticPaths
中的 fallback
参数会改变 getStaticProps
函数的行为.如需参考,请参阅文档>
I have an edit page that will be rendered with an id parameter and it works fine when application is running but while building the nextjs app I get this error
[Error: ENOENT: no such file or directory, rename 'C:\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\export\en\companies\edit[id].html' -> 'C:\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\server\pages\en\companies\edit[id].html']
the full error
I am not sure what this error is related to or what mistake am I making in my code that this error is occuring during build time.
Here is the code of my page
import { WithAuthorization } from 'common/roq-hocs';
import { MainLayout } from 'layouts';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import React, { FunctionComponent } from 'react';
import { CompaniesEditView } from 'views/companies-edit';
const CompanyCreatePage: FunctionComponent = () => {
const { t } = useTranslation('companiesEdit');
return (
<MainLayout title={t('title')}>
<WithAuthorization
permissionKey="companies.update"
failComponent={
<div className="mt-16 text-2xl text-center text-gray-600">
<span>{t('noView')}</span>
</div>
}
>
<CompaniesEditView />
</WithAuthorization>
</MainLayout>
);
};
export const getStaticProps = async ({ locale }) => ({
props: {
...(await serverSideTranslations(locale, ['common', 'companiesEdit'])),
},
});
export const getStaticPaths = () => ({
paths: ['/companies/edit/[id]'],
fallback: true,
});
export default CompanyCreatePage;
I think that the problem might be that you are not returning the expected paths
model in getStaticPaths
function.
Minimal example of this page:
import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
const CompanyCreatePage = () => {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>Company Create Page Content for id: {id}</h1>
</div>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
// Get all possible 'id' values via API, file, etc.
const ids = ['1', '2', '3', '4', '5']; // Example
const paths = ids.map(id => ({
params: { id },
}));
return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async context => {
return { props: {} };
};
export default CompanyCreatePage;
Then, navigating to the page /users/edit/3/
returns the following content
Take into account that the fallback
param in getStaticPaths
changes the behavior of getStaticProps
function. For reference, see the documentation
这篇关于Nextjs 动态路由与 next-i18next 构建错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!