NextGlobeGen

NextGlobeGen makes it effortless to deliver your content in multiple languages with SEO-optimized, localized URLs.

NextGlobeGen is a powerful TypeScript-first internationalization (i18n) library for Next.js App Router applications. Unlike traditional i18n solutions, NextGlobeGen uses generative programming to automatically create localized routes and type-safe APIs, giving you a seamless development experience with full TypeScript support.

Why NextGlobeGen?

$3

- Zero Runtime Overhead - Routes are generated at build time, not runtime
- Type-Safe Everything - Full TypeScript inference for routes, locales, and messages
- Universal API - Same hooks and components work in both server and client components
- Hot Reloading - Changes to routes and messages regenerate automatically

$3

- SEO Optimized - Automatic language alternate links and localized pathnames
- Performance - Code splitting support with filtered message delivery
- Flexible Routing - Support for prefix-based and domain-based locale routing
- Next.js Native - Built specifically for Next.js App Router with full feature support

$3

- Automatic Key Extraction - Automatically discover translation keys from your source code
- ICU Message Format - Rich text formatting with plurals, dates, numbers, and embedded React components
- Localized Pathnames - Translate URL segments for better SEO (e.g., /en/about → /fi/tietoja)
- Smart Locale Detection - Automatic user locale negotiation with cookie persistence
- Dynamic Routes - Full support for dynamic segments, catch-all routes, and parallel routes

Quick Example

``tsx
import { useTranslations, Link } from "next-globe-gen";

export default function HomePage() {
const t = useTranslations();

return (



);
}
`

`json
{
"welcome": "Welcome!",
"description": "{name} makes i18n effortless",
"dashboard": {
"title": "Dashboard"
}
}
`

This automatically works for all configured locales with zero additional code!

Key Features

$3

The plugin watches your src/_app directory and automatically generates localized versions of your routes in real-time:

`
src/_app/about/page.tsx → src/app/(i18n)/en/about/page.tsx
→ src/app/(i18n)/fi/tietoja/page.tsx
`

No manual route duplication. No runtime route matching. Just write your routes once, and NextGlobeGen handles the rest.

$3

Get full TypeScript support across your entire i18n implementation:

`tsx
// Routes are type-checked

Post
;

// Message keys are autocompleted
const t = useTranslations("dashboard");
t("title"); // ✓ Type-safe
t("typo"); // ✗ TypeScript error

// Locale switching with preserved params
const route = useRoute(); // Type: "/blog/[slug]"
const params = useParams>();

Suomeksi
;
`

$3

Support for rich text formatting with plurals, select, dates, and React components:

`json
{
"welcome": "Welcome {name}!",
"posts": "{count, plural, =0 {No posts} one {One post} other {# posts}}",
"updated": "Last updated: {date, date, long}",
"richText": "Read our guide for more info"
}
`

`tsx
t("welcome", { name: "Jon" });
t("posts", { count: 5 });
t("updated", { date: new Date() });
t("richText", { link: (children) => {children} });
`

$3

NextGlobeGen automatically scans your source files and extracts translation keys, keeping your message files in sync with your code:

`tsx
// Keys are automatically extracted from your source files
const t = useTranslations("home");
t("title"); // Extracted as "home.title"
t("welcome", { _defaultMessage: "Welcome!" }); // Extracted with default message
`

Configure extraction behavior in your config:

`ts
const config = {
messages: {
keyExtractionDirs: ["./src"], // Directories to scan
pruneUnusedKeys: true, // Remove keys no longer in code
whitelistedKeys: [/^dynamic\./], // Protect dynamic keys from pruning
},
};
`

$3

Choose the routing strategy that fits your needs:

Prefix-Based Routing (e.g., example.com/en, example.com/fi)

`ts
const config = {
locales: ["en", "fi"],
defaultLocale: "en",
prefixDefaultLocale: true, // or false for root default locale
};
`

Domain-Based Routing (e.g., example.com, example.fi)

`ts
const config = {
domains: [
{ domain: "example.com", locales: ["en"], defaultLocale: "en" },
{ domain: "example.fi", locales: ["fi"], defaultLocale: "fi" },
],
};
`

$3

The included proxy/middleware handles:

- Locale Negotiation - Detects user's preferred language from Accept-Language header
- Cookie Persistence - Remembers user's language choice
- Alternate Links - Adds SEO-friendly language alternate links to response headers
- Domain Routing - Redirects users to the correct domain based on locale

$3

The same API works everywhere:

`tsx
// "use client"; just add this directive for Client Components
import { useLocale, useTranslations } from "next-globe-gen";

export default function ServerComponent() {
const locale = useLocale();
const t = useTranslations();
return

{t("title")}

;
}
`

Need async functions? Use the get* aliases:

`tsx
export async function generateMetadata() {
const t = getTranslations();
return { title: t("pageTitle") };
}
``

Getting Started

Ready to internationalize your Next.js app? Follow our Getting Started Guide to set up NextGlobeGen in minutes.

$3

If you're familiar with next-intl or considering alternatives, check out our detailed comparison to understand the differences and see which approach fits your project best.