Migrate next-i18next to app router i18n has conflicts

[Hanggi]

The tutorial about apply i18n to app router only shows the new project. https://locize.com/blog/next-13-app-dir-i18n/

When migrate next-i18next to app router, the approach conflict with existing next-i18next.

Is is possible migrate next-i18next to new app/[lang]/page pattern and support both i18n features?

[adrai]

I never tried that, but since the pages setup and the app router setup can coexist (based on Next.js docs), it should work. But if possible I would not keep both approaches in parallel.

[arinaldi]

I have the same question as @Hanggi. I have a large application that uses next-i18next with the pages router. It's not feasible to convert the whole application to the app router at once. I want to convert one route at a time, and implement the new approach for i18n for that route.

I haven't seen any info or examples on how to do this type of migration. I know that both i18n approaches should not be combined long term, but is it technically possible in the short term while converting one route at a time?

[FleetAdmiralJakob]

Good question

[Onibenjo]

Any luck with this? I also wanna migrate our large application and can not do that at once

[arinaldi]

Yes, I got this working:

1. Set up the new app directory according to this example.
2. Create a new [lang] folder in the pages directory.
3. Move existing route folders into the new pages/[lang] folder.
4. In next.config.js, remove the i18n key.

I also updated the new middleware file that adds the locale if missing in the URL.

Original

  // Redirect if there is no locale
  if (pathnameIsMissingLocale) {
    const locale = getLocale(request)

    // e.g. incoming request is /products
    // The new URL is now /en-US/products
    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    )
  }

Updated

    if (pathnameIsMissingLocale) {
      const locale = getLocale(req);
      const newUrl = req.nextUrl.clone();

      // query params are preserved
      newUrl.pathname = `/${locale}${
        pathname.startsWith('/') ? '' : '/'
      }${pathname}`;

      return NextResponse.redirect(newUrl);
    }

[mohitb35]

@arinaldi Did you use i18next alongside, or did you go without a library here? Is there a code example you can share for your solution?

[arinaldi]

Yes, I continued to use next-i18next for existing routes in the pages directory.

I did not use a package for new routes in the app directory. See the link in my step 1 above for a code example.

[mohitb35]

How about interpolation and pluralisation? Did you set up helper functions, or was that not required for you?

I was hoping to keep similar syntax for translated text in both the sides - app and page router

[arinaldi]

Yes, you'll have to write helper functions if you want parity between the two.

Or look into translation packages that support the app router.

[Multiply]

@arinaldi how did you get next-i18next to understand the chosen locale in the pages router?

[multivoltage]

I don't undestand. I have footer component that work well with pages router. I cannot create a page Page3 inside app router and use <Footer /> component (with use-client) since it use useTranslation from "next-i18-next"