Next.js Plugin

@babelize/next integrates with Next.js's webpack build pipeline to discover strings and generate the lockfile during next build.

Setup

Wrap your Next.js configuration with withBabelize:

// next.config.ts
import withBabelize from "@babelize/next";

const nextConfig = {
  // your existing Next.js config
};

export default withBabelize(nextConfig, {
  locales: ["ja", "fr", "de"],
});

Set your API key in .env.local:

BABELIZE_API_KEY=bblz_sk_xxxxxxxxx

Run your build:

npm run build

pnpm build

yarn build

bun run build

The plugin scans your source files, translates discovered strings, and writes babelize-lock.json.

How It Works

The plugin adds a custom webpack plugin that runs after the build completes:

Scans all source files matching the include patterns for babelize() calls
Translates each unique string via the Babelize API for every configured locale
Writes the lockfile to your project root

Unlike the Vite plugin which hooks into every module transform, the Next.js plugin uses a file-globbing approach — it scans files after the build is done. This avoids webpack transform overhead and works with both Turbopack and webpack.

Options

interface BabelizeNextPluginOptions {
  apiKey?: string;                // API key (default: BABELIZE_API_KEY env)
  locales?: string[];             // Target locales
  output?: string;                 // Lockfile path (default: "babelize-lock.json")
  functionName?: string;           // Function name to scan (default: "babelize")
  apiUrl?: string;                 // API endpoint
  include?: string[];              // Source glob patterns
}

Default include patterns:

[
  "src/**/*.{tsx,ts,jsx,js}",
  "app/**/*.{tsx,ts,jsx,js}",
  "pages/**/*.{tsx,ts,jsx,js}",
]

Integration with @babelize/sdk-next

After the lockfile is generated, load it in your app using @babelize/sdk-next:

// app/page.tsx
import { babelizeRSC, loadLockfile } from "@babelize/sdk-next";
import lockfile from "./babelize-lock.json";

loadLockfile(lockfile);

export default async function Home() {
  const welcome = await babelizeRSC("Welcome to Babelize");
  return <h1>{welcome}</h1>;
}

And set up the middleware for locale detection:

// middleware.ts
import { babelizeMiddleware } from "@babelize/sdk-next";

export default babelizeMiddleware({
  supportedLocales: ["en", "ja", "fr", "de"],
});

export const config = { matcher: "/:path*" };

Next.js Plugin

Setup

How It Works

Options

Integration with @babelize/sdk-next

On this page