Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate next-i18next to app router i18n has conflicts #2221

Open
Hanggi opened this issue Oct 19, 2023 · 11 comments
Open

Migrate next-i18next to app router i18n has conflicts #2221

Hanggi opened this issue Oct 19, 2023 · 11 comments

Comments

@Hanggi
Copy link

Hanggi commented Oct 19, 2023

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
Copy link
Member

adrai commented Oct 19, 2023

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
Copy link

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
Copy link

Good question

@Onibenjo
Copy link

Onibenjo commented Dec 6, 2023

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

@arinaldi
Copy link

arinaldi commented Dec 6, 2023

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
Copy link

mohitb35 commented Jan 29, 2024

@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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@multivoltage
Copy link

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants