I get a 404 page in vercel after adding next-i18next

Question

I have added the app next-i18next for internationalisation. After that, all pages in vercel become 404 pages.

By the way, it works perfectly in locally.

WHY？？

const { i18n } = require("./next-i18next.config");

module.exports = {
  i18n: {
    locales: ["en", "fr", "nl-NL", "nl-BE", "de", "ja"],
    defaultLocale: "ja",

https://skripts.vercel.app/

Above is the URL of my site.　There is a this error in the log.

Failed to load resource: the server responded with a status of 500 ()

Can you replicate the issue when running the production build locally with `next build && next start`? — juliomalves, Sep 07 '21 at 18:50
When I ran it, I got a lot of errors. However, yarn build works. — Ryosuke Hujisawa, Sep 08 '21 at 00:36
ERROR Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/ja' — Ryosuke Hujisawa, Sep 08 '21 at 01:44
you may also compare with this: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd — adrai, Dec 08 '21 at 15:00

Alexander Molodtsov · Answer 1 · 2021-11-23T17:01:33.807

Maybe you need to add "getStaticProps" to Dynamic Routing Pages?

// pages/blog/[slug].js
export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      // if no `locale` is provided only the defaultLocale will be generated
      { params: { slug: 'post-1' }, locale: 'en-US' },
      { params: { slug: 'post-1' }, locale: 'fr' },
    ],
    fallback: true,
  }
}

This described here: https://nextjs.org/docs/advanced-features/i18n-routing#dynamic-routes-and-getstaticprops-pages

I have React + Next.js + next-i18next + Vercel application. And when I deployed to the Vercel I start getting an errors in console:

Internal Server Error 500 with all *.json files.

I just added "locale" keys->values and this is solve my problem.

Sfblaauw · Answer 2 · 2022-08-08T11:11:08.270

SOLVED

Please read https://github.com/i18next/next-i18next#vercel-and-netlify this will solve all the problemas

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'...],
  },
  ...(typeof window === undefined
    ? { localePath: path.resolve('./public/locales') }
    : {}),
};

code by @stophecom

It happened to me and the only solution that I found is to generate all the pages (4000), almost 20 minutes to do a deploy :(

const getStaticPaths = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/xxx`);
  const projects = await res.json();
  const slugs = projects.map((p) => slugifyForFront(p.slug));
  const { locales } = i18n;
  const paths = slugs.flatMap((slug) =>
    locales.map((locale) => ({
      params: { slug },
      locale: locale,
    }))
  );
  return { paths, fallback: false };
};

Probably is not the best solution but I could not make it work using fallback: true | blocking always 404

I hope some one post a better solution

I get a 404 page in vercel after adding next-i18next

2 Answers2