feat: add createTranslation helper for app dir

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)
 }