feat: add createTranslation helper for app dir (#1150)

README.md

@@ -34,6 +34,7 @@
 - [3. Configuration](#3-configuration)
 - [4. API](#4-api)
   - [useTranslation](#usetranslation)
+  - [createTranslation](#createtranslation)
   - [withTranslation](#withtranslation)
   - [Trans Component](#trans-component)
   - [DynamicNamespaces](#dynamicnamespaces)
@@ -299,6 +300,15 @@ The `t` function:
     - **ns**: string - Namespace to use when none is embded in the `i18nKey`.
 - **Output**: string
 
+### createTranslation
+
+Similar than `useTranslation` but without being a hook. This helper **only works** in **app dir**.
+
+```ts
+  const { t, lang } = createTranslation('ns1') // default namespace (optional)
+  const title = t('title')
+```
+
 ### withTranslation
 
 **Size**: ~560b 📦

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-translate",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
   "license": "MIT",
   "keywords": [
@@ -42,12 +42,13 @@
     "useTranslation*",
     "setLanguage*",
     "index*",
-    "AppDirI18nProvider*"
+    "AppDirI18nProvider*",
+    "createTranslation*"
   ],
   "scripts": {
     "build": "yarn clean && cross-env NODE_ENV=production && yarn tsc",
     "clean": "yarn clean:build && yarn clean:examples",
-    "clean:build": "del lib appWith* Dynamic* I18n* index context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements AppDirI18nProvider*",
+    "clean:build": "del lib appWith* Dynamic* I18n* index context loadNa* setLang* Trans* useT* withT* getP* getC* *.d.ts getT transC* wrapT* types formatElements AppDirI18nProvider* createTrans*",
     "clean:examples": "del examples/**/.next examples/**/node_modules examples/**/yarn.lock",
     "example": "yarn example:complex",
     "example:basic": "yarn build && yarn --cwd examples/basic && yarn --cwd examples/basic dev",

src/createTranslation.tsx

@@ -0,0 +1,17 @@
+import transCore from './transCore'
+import wrapTWithDefaultNs from './wrapTWithDefaultNs'
+
+// Only for App directory
+export default function createTranslation(defaultNS?: string) {
+  const { lang, namespaces, config } = globalThis.__NEXT_TRANSLATE__ ?? {}
+  const localesToIgnore = config.localesToIgnore || ['default']
+  const ignoreLang = localesToIgnore.includes(lang)
+  const t = transCore({
+    config,
+    allNamespaces: namespaces,
+    pluralRules: new Intl.PluralRules(ignoreLang ? undefined : lang),
+    lang,
+  })
+
+  return { t: wrapTWithDefaultNs(t, defaultNS), lang }
+}

src/useTranslation.tsx

@@ -2,7 +2,7 @@ import { useContext, useMemo } from 'react'
 import { I18n } from '.'
 import wrapTWithDefaultNs from './wrapTWithDefaultNs'
 import I18nContext from './context'
-import transCore from './transCore'
+import createTranslation from './createTranslation'
 
 function useTranslationInPages(defaultNS?: string): I18n {
   const ctx = useContext(I18nContext)
@@ -15,22 +15,8 @@ function useTranslationInPages(defaultNS?: string): I18n {
   )
 }
 
-function useTranslationAppDir(defaultNS?: string) {
-  const { lang, namespaces, config } = globalThis.__NEXT_TRANSLATE__ ?? {}
-  const localesToIgnore = config.localesToIgnore || ['default']
-  const ignoreLang = localesToIgnore.includes(lang)
-  const t = transCore({
-    config,
-    allNamespaces: namespaces,
-    pluralRules: new Intl.PluralRules(ignoreLang ? undefined : lang),
-    lang,
-  })
-
-  return { t: wrapTWithDefaultNs(t, defaultNS), lang }
-}
-
 export default function useTranslation(defaultNS?: string): I18n {
   const appDir = globalThis.__NEXT_TRANSLATE__
-  const useT = appDir?.config ? useTranslationAppDir : useTranslationInPages
+  const useT = appDir?.config ? createTranslation : useTranslationInPages
   return useT(defaultNS)
 }