After carefully following the guidelines provided by i18next/next-i18next for setting up i18n and then referring to the steps outlined in this blog post on locize on how to export static sites using next export, I have managed to successfully generate localized versions of each page.
However, the issue arises when pages that have not been statically generated end up returning a 404 error, despite having fallback: true set in the return object of getStaticPaths. The page functions correctly on localhost but encounters this problem when deployed with Vercel.
Here is the code snippet:
const ArticlePage: NextPageWithLayout<Props> = ({ article }: Props) => {
const { i18n, t } = useTranslation('page/news/article')
const router = useRouter()
if (router.isFallback) return <div>Loading...</div>
return <div>Article</div>
}
export const getStaticPaths: GetStaticPaths = async () => {
let paths: { params: { aid: string; locale: TLocale } }[] = []
try {
const response = await api.get(`/articles?per_page=9999`)
const articles = response.data.data as IArticle[]
articles.forEach((a) => {
getI18nPaths().forEach((p) => {
paths.push({
params: {
aid: a.base_64_id,
locale: p.params.locale,
},
})
})
})
return {
paths,
fallback: true,
}
} catch (error) {
return {
paths,
fallback: true,
}
}
}
export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
try {
const article = await api.get(`/articles/${params?.aid}`)
return {
props: {
...(await serverSideTranslations(locale || 'en', [
'footer',
'header',
'misc',
'page/news/index',
'page/news/article',
])),
article: article.data as IArticle,
},
}
} catch (error) {
return {
notFound: true,
}
}
}
ArticlePage.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>
}
export default ArticlePage
"i18next": "22.4.9",
"next-i18next": "^13.1.5",
"react-i18next": "^12.1.5",
A warning message appears in the console saying
react-i18next:: You will need to pass in an i18next instance by using initReactI18nextVarious attempts have been made to address this issue:
- including
revalidate: 10in the return object ofgetStaticProps - utilizing
fallback: 'blocking' - experimenting with different variants of
localePathinnext-i18next.config, including the recommendation highlighted here: https://github.com/i18next/next-i18next#vercel-and-netlify - adding
react: { useSuspense: false }tonext-i18next.config - trying out combinations of the above solutions