Handle config for locales / default locale

[jetschni]

If you manage your configuration for locales and the default locale in one place. How would you do that?

I want to use this configuration for the following

• In Middleware for next-intl (see change with 2.11.0-beta.6)
• For API requests to specific locales
• For generateStaticParams()

I am thinking to do the following:

next-intl

config/i18n-config.ts

export const { locales, defaultLocale } = {
  locales: ["en", "fr"],
  defaultLocale: "en",
};

middleware.tsx

import { createIntlMiddleware } from "next-intl/server";
import { locales, defaultLocale } from "@/config/i18n-config";

export default createIntlMiddleware({ locales, defaultLocale });

export const config = {
  // Skip all internal paths
  matcher: ["/((?!_next).*)"], 
};

generateStaticParams

layout.tsx

import { locales } from "@/config/i18n-config";
type Props = {
  children: ReactNode;
  params: { locale: string };
};

export function generateStaticParams() {
  return locales.map((locale) => ({
    locale: locale,
  }));
}

[amannn]

That looks ok to me! Did you encounter any problem with this?

Note that the usage of next-intl in the app directory is currently SSR-only though (no generateStaticParams), see the note in the roadmap.

[jetschni]

Works fine, no issues. Using next.js 13.1.6 and next-intl 2.11.0-beta.6

Thank you for your feedback