Best Practices for Multi-Language and Multi-Region Support

Understanding the Importance of Multi-Language and Multi-Region Support

In today's globalized world, catering to a diverse audience is crucial for the success of any digital platform. Providing multi-language and multi-region support not only makes your content accessible to a broader audience but also enhances user experience, builds trust, and boosts engagement.

It's important to recognize that users feel more comfortable and connected when they can interact with content in their native language. Additionally, regional differences in culture, currency, and legal requirements necessitate tailored content to meet the specific needs of users in different parts of the world.

Implementing Next.js i18n for Seamless Localization

Next.js provides built-in support for internationalization (i18n), making it easier to create multi-language applications. By leveraging Next.js i18n, you can manage translations and serve localized content without much hassle.

To get started, you need to configure the `next.config.js` file by adding an `i18n` object that specifies the available locales and the default locale. This setup allows Next.js to automatically handle routing and serving the correct language based on the user's preferences. Additionally, by using the `next-translate` package, you can streamline the process of loading translations and handling dynamic content.

module.exports = {
i18n: {
  // These are all the locales you want to support in
  // your application
locales: ['en-US', 'fr', 'nl-NL'],
  // This is the default locale you want to be used when visiting
  // a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en-US',
  // This is a list of locale domains and the default locale they
  // should handle (these are only required when setting up domain routing)
  // Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
domains: [
{
  domain: 'example.com',
  defaultLocale: 'en-US',
},
{
  domain: 'example.nl',
  defaultLocale: 'nl-NL',
},
{
  domain: 'example.fr',
  defaultLocale: 'fr',
  // an optional http field can also be used to test
  // locale domains locally with http instead of https
http: true,
},
],
},
}

More on this : Internationalization (i18n) Routing

Using Middleware and Cookies for Regional Content Delivery

Another method is using middleware in Next.js which can be used to intercept requests and apply custom logic, such as determining the user's region and serving the appropriate content. By integrating middleware, you can create a more personalized experience for users based on their geographic location.

Cookies play a vital role in storing user preferences, such as their preferred language or region. By setting cookies during the user's first visit, you can ensure that subsequent visits are automatically customized according to their preferences. This approach not only improves user experience but also reduces server load by minimizing the need for repeated localization checks.

Here is the quick example of using middleware for the localization

import { NextResponse, NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
const pathname = req.nextUrl.pathname;

// Skip locale handling for static files
if (/\.(png|svg|jpg|webp|mp3|geojson|ico)$/.test(pathname)) return;

// Get locale from URL or cookie, defaulting to 'en'
let locale = req.nextUrl.locale.slice(0, 2);
const cookieLocale = req.cookies.get("lang")?.value;

// If URL locale exists and differs from cookie, update cookie
if (locale && (!cookieLocale || cookieLocale !== locale)) {
  const response = NextResponse.rewrite(
  new URL(`/${locale}${pathname}`, req.nextUrl)
);

  // Set the cookie with the new locale
response.cookies.set("lang", locale, {
  maxAge: 365 * 24 * 60 * 60, // 1 year
path: "/",
  secure: process.env.NODE_ENV === "production",
  sameSite: "lax",
});

  return response;
}

// Use cookie locale if no URL locale is present
locale = cookieLocale || "en";

// Create new URL with locale prefix
const newUrl = new URL(`/${locale}${pathname}`, req.nextUrl);
return NextResponse.rewrite(newUrl);
}

export const config = {
// Match all paths except static files and API routes
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

Our locale middleware serves as an intelligent language preference manager for your Next.js application. When a user visits your site, it performs a sophisticated check of their language preferences through a series of steps. First, it looks at the URL to see if a specific language is requested (like '/fr/about' for French). If it finds a URL-specified locale that's different from what's stored in their cookies, it automatically updates their language preference cookie to match this new choice. This ensures that their explicitly chosen language preference persists across future visits.

If no locale is specified in the URL, the middleware falls back to checking the user's previously stored preference in their cookies. This creates a seamless experience where users don't have to repeatedly select their preferred language. As a final fallback, if no previous preference is found, the middleware defaults to English ('en'), ensuring there's always a language selected. For security and convenience, these preferences are stored in a cookie that's configured with modern security best practices - including secure flags when in production and 'sameSite' attributes to prevent cross-site request forgery. The cookie is set to expire after one year, giving users a long-lasting but not permanent preference setting.

SEO Optimization for Multiple Languages and Regions

Search Engine Optimization (SEO) is a critical aspect of reaching a global audience. When dealing with multi-language and multi-region support, it's important to use hreflang tags to inform search engines about the different language versions of your content. This helps search engines serve the correct version to users based on their language and region.

Additionally, ensure that your URL structure is user-friendly and reflects the language and region of the content. For instance, using subdirectories like /en/ for English or /fr/ for French can improve both user experience and SEO. Regularly updating and maintaining your sitemaps to include all language versions is also essential for effective indexing by search engines.

Opps! No Internet