NextGlobeGen

Localize your Next.js App Router routes and content to serve your application for all users around the world.

layout.tsx

// Package APIs work in both server and client components
import { useLocale, useTranslations, Link } from "next-globe-gen";

function Layout(props: { children: React.ReactNode }) {
  const locale = useLocale();
  const t = useTranslations();
  return (
    <html lang={locale}>
      <body>
        <h1>{t("home.title")}</h1>
        <Link href="/dashboard">{t("dashboard.title")}</Link>
        {props.children}
      </body>
    </html>
  );
}

Effortless internationalization

The smoothest DX for Next.js internationalization

When using NextGlobeGen for localizing your app, you barely even notice it's existence. Every functionality of Next.js App Router is supported out of the box.

TypeScript support: All hooks and functions are strictly typed. Even the available routes and message interpolation patterns are type-safe.
No cookies or custom headers: Static rendering and export output mode are supported since no cookies or custom headers are used.
ICU message format: The package supports ICU formatted interpolation patterns in messages. Include for example pluralizations and rich text in messages.
Localized pathnames: Improve the application SEO by localizing the route pathnames in addition to localizing the content.
Context aware APIs: Package APIs work interchangeably in Server and Client Components. The current locale is inferred through the rendering context.
Pre-configured middleware: The package middleware handles locale detection, redirection and adding alternate link header to responses for improved SEO.