具有next-i18next生成错误的动态路由

Question

我有一个编辑页面，它将使用id参数呈现，并且在应用程序运行时运行良好，但是在构建nextjs应用程序时，我得到了这个错误。

[错误: ENOENT:没有这样的文件或目录，重命名C：\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\export\en\companies\editid.html‘-> 'C:\Users\Ahsan Nisar\Documents\GitHub\customer-portal\frontend.next\server\pages\en\companies\editid.html']

​

全误差

我不知道这个错误与什么相关，或者我在代码中犯了什么错误，这个错误是在构建过程中发生的。

这是我的页面代码

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;

Answer 1

我认为问题可能在于您没有在getStaticPaths函数中返回预期的getStaticPaths模型。

本页的最小示例：

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;

然后，导航到页面/users/edit/3/返回以下内容

​

​

考虑到fallback参数在getStaticPaths中会改变getStaticProps函数的行为。有关参考，请参见文档