Closed Ruslan0111 closed 3 years ago
You'll need to provide a reproducible repository.
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;
Can you please provide a reproducible repository?
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...
Actually, my problem (and possibly OPs) was solved in #1237
I have dynamic routes like:
Routes like /export/3 work well because of default locale, but routes like /en/export/3 go to 404 page