features.title features.titleHighlight

features.description

features.getStarted features.openDashboard

features.cdn.title

features.cdn.description

features.cdn.docLabel

features.ssr.title

features.ssr.description

features.ssr.docLabel

features.switching.title

features.switching.description

features.switching.docLabel

features.discovery.title

features.discovery.description

features.discovery.docLabel

features.typesafe.title

features.typesafe.description

features.typesafe.docLabel

features.ai.title

features.ai.description

features.ai.docLabel

features.middleware.title

features.middleware.description

features.middleware.docLabel

features.dashboard.title

features.dashboard.description

features.dashboard.docLabel

features.journey.title

features.journey.description

features.journey.step1.title

features.journey.step1.description

features.journey.step1.code

features.journey.step2.title

features.journey.step2.description

export const i18n = createI18n({ ... })

features.journey.step3.title

features.journey.step3.description

<BetterI18nProvider>

features.journey.step4.title

features.journey.step4.description

const t = useTranslations("ns")

features.compat.title

features.compat.description

features.compat.featureColumn	Next.js	Expo	Remix	Hono	TanStack
features.compat.cdnFetch	✓	✓	✓	✓	✓
features.compat.isrRevalidation	✓	—	✓	—	✓
useSetLocale()	✓	✓	✓	✓	✓
useFormatter()	✓	✓	✓	✓	✓
LocaleDropdown	✓	✓	✓	✓	✓
features.compat.ssrSupport	✓	—	✓	✓	✓

features.quickIntegration

features.quickIntegrationDesc features.followGuide

i18n.config.ts

// i18n.config.ts
import { createI18n } from "@better-i18n/next";

export const i18n = createI18n({
  project: "your-org/your-project",
  defaultLocale: "en",
});

// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();

// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
  {children}
</BetterI18nProvider>

// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;

features.ctaTitle

features.ctaDescription

features.ctaDocs features.ctaDashboard

site.loading

features.compat.featureColumn

Next.js

Expo

Remix

Hono

TanStack

features.compat.cdnFetch

✓

features.compat.isrRevalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

features.compat.ssrSupport

✓

—

✓

// i18n.config.ts import { createI18n } from "@better-i18n/next"; export const i18n = createI18n({ project: "your-org/your-project", defaultLocale: "en", }); // middleware.ts import { i18n } from "./i18n.config"; export default i18n.betterMiddleware(); // app/[locale]/layout.tsx const messages = await i18n.getMessages(locale); <BetterI18nProvider config={i18n.config} locale={locale} messages={messages}> {children} </BetterI18nProvider> // Any component const t = useTranslations("namespace"); return <h1>{t("title")}</h1>;