Nextjs 动态路由与 next-i18next 构建错误

Posted 2023-03-30

【中文标题】Nextjs 动态路由与 next-i18next 构建错误

【英文标题】：Nextjs dynamic routes with next-i18next build error

【发布时间】：2021-08-09 22:34:10

【问题描述】：

我有一个编辑页面，它将使用 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';
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;

【问题讨论】：

如果我设置了fallback: false，那么构建工作，但页面不会被渲染，如果设置为true，那么页面渲染正常但构建失败

任何帮助将不胜感激。

它是否在开发模式下工作？

@Nilay 构建失败，但应用程序在我的本地机器上运行起来就像一个魅力

【参考方案1】：

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

此页面的最小示例：

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/返回以下内容

考虑到getStaticPaths 中的fallback 参数会改变getStaticProps 函数的行为。如需参考，请参阅documentation

【讨论】：

所以你的意思是从 getStaticPaths 进行 graphql api 调用（我的后端）是不可避免的。我试图避免这种情况

这取决于您是否想在构建时生成所有可用页面。如果您有大量页面，或者您想避免在构建时调用 api，您可以使用 fallback: true 选项，该选项将通过在运行时运行 getStaticProps 来加载页面的道具。在这种情况下，您必须使用来自useRouter 的isFallback 来处理加载状态。 Here 有一个例子可以证明这种行为。

你可以看到它在工作here 只需传递一个推文 ID。

只需要设置paths: [] 就可以了。成功了