next-i18next, next export 和非生成页面上的 404（带有 fallback true/blocking）

huangapple
go评论129阅读模式
英文:

next-i18next, next export & 404 on non-generated pages (with fallback true/blocking)

问题

抱歉，以下是您要翻译的内容：

Having followed the documentation on i18next/next-i18next to configure i18n and then the instructions on this locize blog post on how to export static sites with next export, I am able to export localised versions of each page.

The problem is that pages that have not been statically generated return a 404, despite setting fallback: true in the getStaticPaths return object. The page works on my localhost but not when deployed with Vercel.

Code:

  1. const ArticlePage: NextPageWithLayout<Props> = ({ article }: Props) => {
  2.     const { i18n, t } = useTranslation('page/news/article')
  4.     const router = useRouter()
  6.     if (router.isFallback) return <div>Loading...</div>
  8.     return <div>Article</div>
  9. }
  11. export const getStaticPaths: GetStaticPaths = async () => {
  12.     let paths: { params: { aid: string; locale: TLocale } }[] = []
  14.     try {
  15.         const response = await api.get(`/articles?per_page=9999`)
  16.         const articles = response.data.data as IArticle[]
  18.         articles.forEach((a) => {
  19.             getI18nPaths().forEach((p) => {
  20.                 paths.push({
  21.                     params: {
  22.                         aid: a.base_64_id,
  23.                         locale: p.params.locale,
  24.                     },
  25.                 })
  26.             })
  27.         })
  29.         return {
  30.             paths,
  31.             fallback: true,
  32.         }
  33.     } catch (error) {
  34.         return {
  35.             paths,
  36.             fallback: true,
  37.         }
  38.     }
  39. }
  41. export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
  42.     try {
  43.         const article = await api.get(`/articles/${params?.aid}`)
  45.         return {
  46.             props: {
  47.                 ...(await serverSideTranslations(locale || 'en', [
  48.                     'footer',
  49.                     'header',
  50.                     'misc',
  51.                     'page/news/index',
  52.                     'page/news/article',
  53.                 ])),
  54.                 article: article.data as IArticle,
  55.             },
  56.         }
  57.     } catch (error) {
  58.         return {
  59.             notFound: true,
  60.         }
  61.     }
  62. }
  64. ArticlePage.getLayout = function getLayout(page: ReactElement) {
  65.     return <Layout>{page}</Layout>
  66. }
  68. export default ArticlePage
  1. "i18next": "22.4.9",
  2. "next-i18next": "^13.1.5",
  3. "react-i18next": "^12.1.5",

There is a warning in the console react-i18next:: You will need to pass in an i18next instance by using initReactI18next when entering a non-generated page (alongside the not-found error, of course). An issue raised about this warning is interesting, but I could not find an answer to my issue within: https://github.com/i18next/next-i18next/issues/1917.

Attempts to fix:

  • adding revalidate: 10 to the return object of getStaticProps
  • using fallback: 'blocking'
  • trying a few different variants of localePath in next-i18next.config including the recommendation featured here: https://github.com/i18next/next-i18next#vercel-and-netlify
  • adding react: { useSuspense: false } to next-i18next.config
  • combinations of the above
英文:

Having followed the documentation on i18next/next-i18next to configure i18n and then the instructions on this locize blog post on how to export static sites with next export, I am able to export localised versions of each page.

The problem is that pages that have not been statically generated return a 404, despite setting fallback: true in the getStaticPaths return object. The page works on my localhost but not when deployed with Vercel.

Code:

  1. const ArticlePage: NextPageWithLayout&lt;Props&gt; = ({ article }: Props) =&gt; {
  2. const { i18n, t } = useTranslation(&#39;page/news/article&#39;)
  3. const router = useRouter()
  4. if (router.isFallback) return &lt;div&gt;Loading...&lt;/div&gt;
  5. return &lt;div&gt;Article&lt;/div&gt;
  6. }
  7. export const getStaticPaths: GetStaticPaths = async () =&gt; {
  8. let paths: { params: { aid: string; locale: TLocale } }[] = []
  9. try {
  10. const response = await api.get(`/articles?per_page=9999`)
  11. const articles = response.data.data as IArticle[]
  12. articles.forEach((a) =&gt; {
  13. getI18nPaths().forEach((p) =&gt; {
  14. paths.push({
  15. params: {
  16. aid: a.base_64_id,
  17. locale: p.params.locale,
  18. },
  19. })
  20. })
  21. })
  22. return {
  23. paths,
  24. fallback: true,
  25. }
  26. } catch (error) {
  27. return {
  28. paths,
  29. fallback: true,
  30. }
  31. }
  32. }
  33. export const getStaticProps: GetStaticProps = async ({ locale, params }) =&gt; {
  34. try {
  35. const article = await api.get(`/articles/${params?.aid}`)
  36. return {
  37. props: {
  38. ...(await serverSideTranslations(locale || &#39;en&#39;, [
  39. &#39;footer&#39;,
  40. &#39;header&#39;,
  41. &#39;misc&#39;,
  42. &#39;page/news/index&#39;,
  43. &#39;page/news/article&#39;,
  44. ])),
  45. article: article.data as IArticle,
  46. },
  47. }
  48. } catch (error) {
  49. return {
  50. notFound: true,
  51. }
  52. }
  53. }
  54. ArticlePage.getLayout = function getLayout(page: ReactElement) {
  55. return &lt;Layout&gt;{page}&lt;/Layout&gt;
  56. }
  57. export default ArticlePage
  1. &quot;i18next&quot;: &quot;22.4.9&quot;,
  2. &quot;next-i18next&quot;: &quot;^13.1.5&quot;,
  3. &quot;react-i18next&quot;: &quot;^12.1.5&quot;,

There is a warning in the console react-i18next:: You will need to pass in an i18next instance by using initReactI18next when entering an non-generated page (alongside the not-found error of course). An issue raised about this warning is interesting but I could not find an answer to my issue within: https://github.com/i18next/next-i18next/issues/1917.

Attempts to fix:

  • adding revalidate: 10 to the return object of getStaticProps
  • using fallback: &#39;blocking&#39;
  • trying a few different variants of localePath in next-i18next.config including the recommendation featured here: https://github.com/i18next/next-i18next#vercel-and-netlify
  • adding react: { useSuspense: false } to next-i18next.config
  • combinations of the above

答案1

得分: 1

next export 不支持 fallback: true，如其文档所述。我应该一直使用 next build - 这也会在构建时生成静态 HTML，同时支持在资源不存在时进行运行时获取。

英文:

next export does not support fallback: true as per their documentation. I should've been using next build - this too will generate static HTML at build time whilst also supporting runtime fetching if the resource does not exist.

huangapple
  • 本文由 发表于 2023年2月16日 19:26:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/75471589.html
  • javascript
  • next-i18next
  • next.js
  • vercel
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定