Next.js 14: Internationalization in using next-intl

Question

I have a project where I used the package next-intl and I want to change the folder structure, similar to the example below:

In order to access localhost:3000/[business_slug]/[locale]/... instead of localhost:3000/[locale]/[business_slug]. Is that ok? Here you can find the middleware I am using:

import createMiddleware from "next-intl/middleware";
import { locales, defaultLocale } from "./configs/next-intl";

export default createMiddleware({
  locales,
  defaultLocale,
});

export const config = {
  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
};

Answer 1

So according to your comment:

Each business can configure the number of languages they use, including the default language of their choice

You have 2 problems.

1. Translation. For translation I suggest to keep your url at the start for example /[locale]/business. And implement translation next-intl docs.

2. Business logic. When user selects default language and when user configure the number of languages you need to save it in database. Preferably in string and string[].

In language selector you would need to display options on how many languages each user can see. Either by fetching data in language selector or better way to fetch once in middleware and add it to Zustand state, and use state value in language selector.

Future feature issue: If each business would want to update and change their translations to suit their needs. Or business would want to add their own language for private use. This option wouldn't work and you would need to find more dynamic solution.