vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.04k stars 27k forks source link

Nextjs dynamic routes with next-i18next translations build error #25311

Open AhsanNissar opened 3 years ago

AhsanNissar commented 3 years ago

What version of Next.js are you using?

10.0.3

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Digital Ocean

Describe the Bug

I have a dynamic route and that page gets rendered when I click on edit icon in the last column of the table view page. It send an ID to the edit page and the edit page loads up. The appliation works just fine during runtime and there are no issues. However on making the build I get the error as you can see in the attached screenshot. I making use of next-i18next to load translations too and therefore in staticProps I only need to load required locales and no other id is required as the gets sent from table page on edit icon click. I am not sure what mistake I am making here and would very much appreciate your support

Screenshot (543)

Here is my edit page code

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;

Expected Behavior

I need to make the build to be able to deploy app. If I set fallback: false then the app does build but then I cannot render the edit page then. Therefore both cases must work.

To Reproduce

I think my code can be utilized to reproduce the issue alongwith usage of next-i18next package

MikeyZat commented 3 years ago

I'm facing the same issue, I don't get why I must include getStaticPaths if I don't use the dynamic id inside the getStaticProps in any way.

jobveldhuis commented 1 year ago

As far as I can quickly reproduce, this seems to be fixed in next@13, however, upgrading is currently not feasible for us, so this is based on a very non-exhaustive and quick test. If anyone could verify, that would be great.