Dynamic routes not working

[Ruslan0111]

I have dynamic routes like:

• pages
  • export
    • index.js
    • [id].js

Routes like /export/3 work well because of default locale, but routes like /en/export/3 go to 404 page

[isaachinman]

You'll need to provide a reproducible repository.

[Ruslan0111]

export/[id].js

import { useEffect, useContext } from 'react';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router'

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import BaseFooter from '../../components/BaseFooter';
import BaseNav from '../../components/BaseNav';
import InnerDescription from '../../components/InnerDescription';
import ExportProductSmallDescription from '../../components/Export/ExportProductSmallDescription';
import BaseForm from '../../components/BaseForm';

import { MenuContext } from '../_app';

function ExportProduct({ productId, productInfo }) {
  const setActiveMenuLink = useContext(MenuContext);
  const { t } = useTranslation('export');

  const router = useRouter();
  const activeLang = router.locale;

  useEffect(() => {
    setActiveMenuLink(3);
  }, []);

  const navLinks = [
    {
      title: t('export'),
      to: '/export'
    },
    {
      title: productInfo.title[activeLang],
      to: '/export/' + productId
    }
  ]

  return (
    <>
      <BaseNav links={navLinks} />
      <InnerDescription 
        title={productInfo.title[activeLang]}
        image={productInfo.bigImage}
        paragraphs={
          productInfo.description.map(item => {
            return (
              t(item)
            )
          })
        }
      />
      <div className="export-product-description-blocks">
        {
          productInfo.smallDescriptions.map((smallDescription, index) => {
            return (
              <ExportProductSmallDescription
                key={index}
                image={smallDescription.image}
                title={smallDescription.title}
                paragraphs={
                  smallDescription.description.map(item => {
                    return (
                      t(item)
                    )
                  })
                }
                isInfoRight={smallDescription.isInfoRight}
              />
            )
          })
        }
      </div>
      <BaseForm />
      <BaseFooter />
    </>
  );
}

export async function getStaticPaths() {
  const productIds = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

  return {
    paths: productIds.map(id => {
      return {
        params: {id}
      }
    }),
    fallback: false
  };
}

export async function getStaticProps({ locale, params }) {
  const productId = params.id;
  console.log(params);

  // fetch data from an API
  const productInfo = {
    title: {
      en: 'SPINNING MACHINES',
      ru: 'SPINNING MACHINES'
    },
    bigImage: '/images/export-product.jpg',
    description: [
      'p8',
      'p3',
      'p4'
    ],
    smallDescriptions: [
      {
        image: '/images/export-product-small-1.jpg',
        title: 'SPINNING MACHINES',
        description: [
          'p8',
          'p9'
        ],
        isInfoRight: true
      },
      {
        image: '/images/export-product-small-2.jpg',
        title: 'SPINNING MACHINES',
        description: [
          'p8',
          'p9'
        ],
        isInfoRight: false
      }
    ]
  };

  return {
    props: {
      ...await serverSideTranslations(locale, ['common', 'export']),
      productId,
      productInfo
    }
  }
}

// export async function getServerSideProps({ locale, params }) {
//   const productId = params.id;

//   // fetch data from an API
//   const productInfo = {
//     title: {
//       en: 'SPINNING MACHINES',
//       ru: 'SPINNING MACHINES'
//     },
//     bigImage: '/images/export-product.jpg',
//     description: [
//       'p8',
//       'p3',
//       'p4'
//     ],
//     smallDescriptions: [
//       {
//         image: '/images/export-product-small-1.jpg',
//         title: 'SPINNING MACHINES',
//         description: [
//           'p8',
//           'p9'
//         ],
//         isInfoRight: true
//       },
//       {
//         image: '/images/export-product-small-2.jpg',
//         title: 'SPINNING MACHINES',
//         description: [
//           'p8',
//           'p9'
//         ],
//         isInfoRight: false
//       }
//     ]
//   };

//   return {
//     props: {
//       ...await serverSideTranslations(locale, ['common', 'export']),
//       productId,
//       productInfo
//     }
//   }
// }

export default ExportProduct;

[isaachinman]

Can you please provide a reproducible repository?

[daviddavid]

I'm having the same problem when I set fallback: false in getStaticPaths. The locale specific route works with dynamic routes if fallback: true. Let me see if I can setup a sample repo...

[daviddavid]

Actually, my problem (and possibly OPs) was solved in #1237