Nextjs dynamic routes with next-i18next build error

Question

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;

if I set `fallback: false` then build works but then pages does not get rendered and if set to `true` then pages render fine but build fails — Ehsan Nissar, May 20 '21 at 18:11
@Nilay build failes but application works like a charm on my local machine — Ehsan Nissar, May 21 '21 at 07:05

score 3 · Accepted Answer · answered May 21 '21 at 10:32

3

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

answered May 21 '21 at 10:32

hmartos

861
2
10
19

So you mean that making a graphql api call(my backend) from getStaticPaths is inevitable. I was trying to avoid this – Ehsan Nissar May 21 '21 at 10:34
It depends if you want to generate all the available pages at build time or not. If you have a large set of pages or you want to avoid the api call at build time you can use the `fallback: true` option, which will load the props of the page by running `getStaticProps` at runtime. In this case, you will have to handle the loading state using `isFallback` from `useRouter`. [Here](https://github.com/lfades/static-tweet/blob/master/pages/%5Btweet%5D.js) there is an example that demonstrate this behavior. – hmartos May 24 '21 at 06:29
You can see it working [here](https://static-tweet.vercel.app/) just passing a tweet id. – hmartos May 24 '21 at 06:35
Just needed to set `paths: []` and thats it. It worked – Ehsan Nissar May 24 '21 at 14:37
It's life saver man , it fix my dynamic routing issue. – Nuruzzaman Khan May 25 '22 at 03:47

Nextjs dynamic routes with next-i18next build error

1 Answers1

Linked