support Nextjs

Author: wadeyw

.github/workflows/publish.yml

@@ -1,8 +1,10 @@
 name: Publish
 
 on:
-  push:
-    branches: [main]
+  release:
+    types: [published]
+  workflow_dispatch:
+  
 
 jobs:
   publish:
@@ -27,15 +29,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - name: Install dependencies
-        run: npm ci
-
       - name: Build package
         run: npm run build
         env:
           BASE_URL: ${{ secrets.BASE_URL }}
 
-      # - name: Publish to NPM
-      #   run: npm publish
-      #   env:
-      #     NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,50 +1,34 @@
 # React AutoLocalise
 
-This is SDK for [AutoLocalise](<[AutoLocalise](https://www.autolocalise.com)>).
+This is SDK for [AutoLocalise](https://www.autolocalise.com).
 
-A lightweight, efficient auto-translation SDK for React, React Native, and Expo applications. This SDK provides seamless integration for automatic content translation and support offline mode.
+A lightweight, efficient auto-translation SDK for React and Next.js applications. This SDK provides seamless integration for automatic content translation with support for server-side rendering.
 
 You don't need to prepare any translation files, just provide your API key and the SDK will handle the rest.
 
 ## Features
 
-- 🌐 Cross-platform support (React Web, React Native, Expo)
+- 🌐 React and Next.js support
 - 🚀 Automatic string detection and translation
 - 🎯 Dynamic parameter interpolation
 - 🔍 Static translation tracking
-- 🔌 Offline mode support
 - ⚙️ Configurable cache TTL
 - ⚡️ Tree-shakeable and side-effect free
+- 🔄 Server-side rendering support
+- 🌍 Automated locale detection via middleware
+- ⚡️ Hybrid client/server translation hydration
 
 ## Installation
 
-### React Web
-
 ```bash
 npm install react-autolocalise
 # or
 yarn add react-autolocalise
 ```
 
-### React Native
-
-```bash
-npm install react-autolocalise @react-native-async-storage/async-storage
-# or
-yarn add react-autolocalise @react-native-async-storage/async-storage
-```
-
-### Expo
-
-```bash
-npm install react-autolocalise expo-secure-store
-# or
-yarn add react-autolocalise expo-secure-store
-```
-
 ## Usage
 
-### 1. Initialize the SDK
+### Initialize the SDK
 
 ```typescript
 import { TranslationProvider } from "react-autolocalise";
@@ -65,7 +49,7 @@ const App = () => {
 };
 ```
 
-### 2. Use the Translation Hook
+### Use the Translation Hook
 
 Basic usage:
 
@@ -105,71 +89,102 @@ const MyComponent = () => {
 };
 ```
 
-## Locale Format
+## Next.js Server-Side Rendering Support
 
-The locale format follows the ISO 639-1 language code standard, optionally combined with an ISO 3166-1 country code:
+This SDK provides comprehensive SSR support through middleware-based locale detection and server components. Here's how to implement end-to-end server-side translation:
 
-- Language code only: 'en', 'fr', 'zh', 'ja', etc.
-- Language-Region: 'en-US', 'fr-FR', 'zh-CN', 'pt-BR', etc.
+### Middleware Setup
 
-## How to get the locale
+Create a middleware file to detect user's locale from request headers or URL parameters:
 
-### React
+```tsx:/src/middleware.ts
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
 
-In React web applications, you can get the user's preferred locale from the browser:
+const defaultLocale = "en";
 
-```typescript
-// Get the primary locale
-const browserLocale = navigator.language; // e.g., 'en-US'
+export function middleware(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const localeParam = searchParams.get("locale");
 
-// Get all preferred locales
-const preferredLocales = navigator.languages; // e.g., ['en-US', 'en']
+  const acceptLanguage = request.headers.get("accept-language");
+  const browserLocale = acceptLanguage?.split(',')[0].split(';')[0].substring(0,2);
 
-// Extract just the language code if needed
-const languageCode = browserLocale.split("-")[0]; // e.g., 'en'
+  const locale = localeParam || browserLocale || defaultLocale;
+
+  const response = NextResponse.next();
+  response.headers.set("x-locale", locale);
+  return response;
+}
+
+export const config = {
+  matcher: "/:path*",
+};
 ```
 
-### React Native
+### Server Component Implementation
 
-In React Native, you can get the device locale using the Localization API:
+Create server components that utilize the detected locale:
 
-```typescript
-import * as Localization from "react-native-localization";
-// or
-import { NativeModules, Platform } from "react-native";
-
-// Using react-native-localization
-const deviceLocale = Localization.locale; // e.g., 'en-US'
-
-// Alternative method using native modules
-const deviceLanguage =
-  Platform.OS === "ios"
-    ? NativeModules.SettingsManager.settings.AppleLocale ||
-      NativeModules.SettingsManager.settings.AppleLanguages[0]
-    : NativeModules.I18nManager.localeIdentifier;
+```tsx:/src/app/components/ServerComponent.tsx
+import { ServerTranslation } from "react-autolocalise/server";
+import { headers } from "next/headers";
+
+export default async function ServerComponent() {
+  const headersList = headers();
+  const targetLocale = headersList.get("x-locale") || "en";
+
+  const serverTranslation = new ServerTranslation({
+    apiKey: "your-api-key",
+    sourceLocale: "en",
+    targetLocale
+  });
+
+  const translations = await serverTranslation.translateTexts([
+    "Hello from Server Component",
+    "This component is rendered on the server side"
+  ]);
+
+  return (
+    <div>
+      <h1>{translations["Hello from Server Component"]}</h1>
+      <p>{translations["This component is rendered on the server side"]}</p>
+    </div>
+  );
+}
 ```
 
-### Expo
+### SEO Considerations
 
-In Expo, you can use the Localization API from expo-localization:
+While our SDK currently supports server-side rendering of translated content, achieving full locale-specific visibility in search engine results requires additional implementation. We're working on this step by step example and welcome community contributions to:
 
-```typescript
-import * as Localization from "expo-localization";
+- Implement canonical URL handling for localized content
+- Develop locale-specific sitemap generation
+- Show hreflang tag implementation
 
-// Get the device locale
-const locale = Localization.locale; // e.g., 'en-US'
+If you'd like to contribute examples or implementations for these features, please submit a Pull Request!
 
-// Get just the language code
-const languageCode = locale.split("-")[0]; // e.g., 'en'
+## Locale Format
 
-// Get the user's preferred locales
-const preferredLocales = Localization.locales; // e.g., ['en-US', 'en']
+The locale format follows the ISO 639-1 language code standard, optionally combined with an ISO 3166-1 country code:
 
-// Check if the device uses RTL layout
-const isRTL = Localization.isRTL;
-```
+- Language code only: 'en', 'fr', 'zh', 'ja', etc.
+- Language-Region: 'en-US', 'fr-FR', 'zh-CN', 'pt-BR', etc.
 
-Note: When running Expo in a web browser, it will use the browser's locale settings (navigator.language) automatically.
+## How to get the locale
+
+In React web applications, you can get the user's preferred locale from the browser:
+
+```typescript
+// Get the primary locale
+const browserLocale = navigator.language; // e.g., 'en-US'
+
+// Get all preferred locales
+const preferredLocales = navigator.languages; // e.g., ['en-US', 'en']
+
+// Extract just the language code if needed
+const languageCode = browserLocale.split("-")[0]; // e.g., 'en'
+```
 
 ## API Reference
 
@@ -181,12 +196,14 @@ Note: When running Expo in a web browser, it will use the browser's locale setti
 
 ### TranslationConfig
 
-| Property     | Type   | Required | Description                                                  |
-| ------------ | ------ | -------- | ------------------------------------------------------------ |
-| apiKey       | string | Yes      | Your API key for the translation service                     |
-| sourceLocale | string | No       | Source locale for translations (will auto-detect if omitted) |
-| targetLocale | string | Yes      | Target locale for translations                               |
-| cacheTTL     | number | No       | Cache validity period in hours (default: 24)                 |
+| Property     | Type   | Required | Description                                  |
+| ------------ | ------ | -------- | -------------------------------------------- |
+| apiKey       | string | Yes      | Your API key for the translation service     |
+| sourceLocale | string | Yes      | Source locale for translations               |
+| targetLocale | string | Yes      | Target locale for translations               |
+| cacheTTL     | number | No       | Cache validity period in hours (default: 24) |
+
+**Tips**: When `sourceLocale` === `targetLocale` no translation requests will be send.
 
 ### useAutoTranslate Hook
 

jest.config.cjs

@@ -3,7 +3,12 @@ module.exports = {
   testEnvironment: "jsdom",
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   transform: {
-    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.(ts|tsx)$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.json",
+      },
+    ],
   },
   setupFilesAfterEnv: ["@testing-library/jest-dom"],
   testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"],