@better-intl/next 0.1.1 → 0.1.2

package/README.md

@@ -2,17 +2,40 @@
 
 Next.js App Router integration for **better-intl**.
 
-Middleware for locale routing, client/server providers, and RSC support.
-
 ## Install
 
 ```bash
-npm install @better-intl/next @better-intl/react @better-intl/core
+npm install @better-intl/next @better-intl/react @better-intl/core @better-intl/compiler
 ```
 
-## Usage
+## Quick Start
+
+### 1. Configure
+
+```json
+// better-intl.config.json
+{
+  "defaultLocale": "en",
+  "locales": ["en", "pt-BR", "es"],
+  "catalogs": "./locales/{locale}.json",
+  "include": ["app/**/*.tsx"]
+}
+```
+
+### 2. Plugin (next.config.js)
+
+```js
+import { withBetterIntl } from "@better-intl/next/plugin";
 
-### 1. Middleware
+export default withBetterIntl({
+  locales: ["en", "pt-BR", "es"],
+  defaultLocale: "en",
+})({
+  // your next config
+});
+```
+
+### 3. Middleware
 
 ```ts
 // middleware.ts
@@ -26,7 +49,7 @@ export default createIntlMiddleware({
 export const config = { matcher: ["/((?!api|_next|.*\\..*).*)"] };
 ```
 
-### 2. Layout with client provider
+### 4. Layout
 
 ```tsx
 // app/[locale]/layout.tsx
@@ -54,7 +77,64 @@ export default async function Layout({
 }
 ```
 
-### 3. Server Components (RSC)
+### 5. Write normal JSX
+
+```tsx
+// app/[locale]/page.tsx
+export default function Page() {
+  return (
+    <section>
+      <h1>Hello world</h1>
+      <p>The best SaaS platform</p>
+      <button type="button">Get started</button>
+    </section>
+  );
+}
+```
+
+That's it. No `t()` calls, no hooks, no imports. The Babel plugin transforms your JSX automatically at build time:
+
+```tsx
+// What the compiler generates behind the scenes:
+import { useTranslation } from "@better-intl/react";
+
+export default function Page() {
+  const { t: __t } = useTranslation();
+  return (
+    <section>
+      <h1>{__t("0rr2b7c", undefined, "Hello world")}</h1>
+      <p>{__t("1di71qw", undefined, "The best SaaS platform")}</p>
+      <button type="button">{__t("1gvrrqk", undefined, "Get started")}</button>
+    </section>
+  );
+}
+```
+
+Enable it via Babel:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [["@better-intl/compiler/babel", { mode: "auto" }]],
+};
+```
+
+Or for zero-runtime (inlines translations at build time):
+
+```js
+module.exports = {
+  plugins: [
+    ["@better-intl/compiler/babel", {
+      locale: "pt-BR",
+      messages: require("./locales/pt-BR.json"),
+    }],
+  ],
+};
+```
+
+## Server Components (RSC)
+
+For React Server Components where hooks aren't available, use `getTranslator`:
 
 ```tsx
 // app/[locale]/page.tsx
@@ -74,12 +154,16 @@ export default async function Page({
 }
 ```
 
-### 4. Metadata translations
+## Metadata
 
 ```tsx
 import { getMetadataTranslator } from "@better-intl/next/server";
 
-export async function generateMetadata({ params }) {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
   const { locale } = await params;
   const t = await getMetadataTranslator(locale, () =>
     import(`../../locales/${locale}.json`)
@@ -89,25 +173,13 @@ export async function generateMetadata({ params }) {
 }
 ```
 
-### 5. Next.js plugin
-
-```js
-// next.config.js
-import { withBetterIntl } from "@better-intl/next/plugin";
-
-export default withBetterIntl({
-  locales: ["en", "pt-BR", "es"],
-  defaultLocale: "en",
-})({});
-```
-
 ## API
 
 | Export | Entry point | Description |
 |--------|-------------|-------------|
 | `NextIntlClientProvider` | `@better-intl/next` | Client provider for layouts |
 | `createIntlMiddleware(config)` | `@better-intl/next/middleware` | Locale detection and routing |
-| `getTranslator(locale, loader)` | `@better-intl/next/server` | Server-side `t()` function |
+| `getTranslator(locale, loader)` | `@better-intl/next/server` | Server-side `t()` for RSC |
 | `getMetadataTranslator(locale, loader)` | `@better-intl/next/server` | For `generateMetadata` |
 | `getMessages(loader)` | `@better-intl/next/server` | Load messages for a locale |
 | `withBetterIntl(config)` | `@better-intl/next/plugin` | next.config.js plugin |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-intl/next",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Next.js App Router integration for better-intl",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -33,8 +33,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@better-intl/core": "0.1.1",
-    "@better-intl/react": "0.1.1"
+    "@better-intl/core": "0.1.2",
+    "@better-intl/react": "0.1.2"
   },
   "peerDependencies": {
     "next": ">=14.0.0",