Translating URLs in Next.js 13 with App directory and next-intl

Question

I'm currently working on a multilingual Next.js 13 application, and I'm using the next-intl package for internationalization. I've been trying to set up translated URLs for my routes, but I'm running into some issues.

Here's an example of what I want to achieve. If the source language is Danish, a route could be:mypage/om.
For English, it would be: mypage/en/about.

My project is structured to utilize the App directory (/app/[lang]/page.tsx).

I've followed the next-intl documentation to set up internationalized routing, but I'm having difficulty getting the URL translation to work correctly with this setup.

I need the pages to be able to take advantage of "generateStaticParams" so we can build static pages with all the diffrent languages and allow each url to be language specific but still only have to create 1 single page for the main language. I hope this makes sense.

When I navigate to mypage/om, the application correctly resolves to the Danish version, i can also see the english version on mypage/en/om. However, I want to be able to navigate to mypage/en/about, without having to make multiple pages with diffrent names.

Does anyone have experience setting up translated URLs with next-intl in Next.js 13, particularly with an App directory structure? Any help would be greatly appreciated. Thanks in advance!

Fatuous

Answer 1

This is something we are also waiting for / have the same issue, and the solution for it is cooking...

Check the Next-Intl Roadmap

Broadax

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Armillia

Answer 2

Let me start by saying that nextjs is not a good framework to work with multilingual websites that require url translation. This is simply non existant in their offering and it is a major setback to any non English development (as they often require the country's main language as well as the current lingua franca).

---

Regarding your issue, I'm unsure if it is / will be possible to do this with next-intl but I'm sharing a possible solution to the issue of url translation.

The solution I've come up with is offered by a library called "next-roots", which generates all the paths at build time as well as their equivalent in the target languages.

It uses a root folder in which you insert your whole application. For instance, given your example:

// defaultRoot folder is a sibling of the /app folder
defaultRoot/
  om/
    layout.tsx
    page.tsx
    i18n.mjs

In that i18n.mjs, you specify the languages and the url translation for that language. For instance:

   // i18n.mjs 
   export const routeNames = [{ locale: 'en', path: 'about-us' }];

They also support dynamic routing.

If you're interested, here's the source: https://github.com/svobik7/next-roots

---

Edit: I take it back, after dwelving a bit, it is possible: https://next-intl-docs.vercel.app/docs/routing/navigation#localized-pathnames

Ur

Answer 3

There is already a good solution:

Localized Pathnames

From the documentation:

https://next-intl-docs.vercel.app/docs/routing/navigation#localized-pathnames

navigation.ts

import {
  createLocalizedPathnamesNavigation,
  Pathnames
} from 'next-intl/navigation';
 
export const locales = ['en', 'de'] as const;
export const localePrefix = 'always'; // Default
 
// The `pathnames` object holds pairs of internal
// and external paths, separated by locale.
export const pathnames = {
  // If all locales use the same pathname, a
  // single external path can be provided.
  '/': '/',
  '/blog': '/blog',
 
  // If locales use different paths, you can
  // specify each external path per locale.
  '/about': {
    en: '/about',
    de: '/ueber-uns'
  }
} satisfies Pathnames<typeof locales>;
 
export const {Link, redirect, usePathname, useRouter, getPathname} = createLocalizedPathnamesNavigation({locales, localePrefix, pathnames});

middleware.ts

import createMiddleware from 'next-intl/middleware';
import {locales, localePrefix, pathnames} from './navigation';
 
export default createMiddleware({
  defaultLocale: 'en',
  localePrefix,
  locales,
  pathnames
});

Enter