Merge pull request #1061 from aralroca/add-hoc-to-fix-client-componen…

…ts-in-next-translate-plugin

add hoc to fix client components in next-translate-plugin

package.json

@@ -1,6 +1,6 @@
 {
  "name": "next-translate",
- "version": "2.0.6",
+ "version": "2.3.0-canary.3",
  "description": "Tiny and powerful i18n tools (Next plugin + API) to translate your Next.js pages.",
  "license": "MIT",
  "keywords": [

src/index.tsx

@@ -115,6 +115,7 @@ declare global {
  var __NEXT_TRANSLATE__: {
  namespaces: Record<string, I18nDictionary>
  lang: string
+ pathname?: string
  }
 
  namespace NodeJS {

src/withTranslationClientComponent.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useReducer } from 'react'
+import type { LoaderConfig } from '.'
+
+/**
+ * @description HOC for internal use only (used by next-translate-plugin)
+ */
+export default function withTranslationClientComponent<
+ P extends JSX.IntrinsicAttributes
+>(
+ Component: React.ComponentType<P>,
+ i18nConfig: LoaderConfig
+): React.ComponentType<P> {
+ function WithTranslation(props: P) {
+ // @ts-ignore
+ const forceUpdate = useReducer(() => [])[1]
+ const isClient = typeof window !== 'undefined'
+
+ if (isClient && !window.__NEXT_TRANSLATE__) {
+ window.__NEXT_TRANSLATE__ = {
+ lang: i18nConfig.defaultLocale!,
+ namespaces: {},
+ }
+ update(false)
+ }
+
+ if (isClient && !window.i18nConfig) {
+ window.i18nConfig = i18nConfig
+ }
+
+ useEffect(update)
+
+ function update(rerender = true) {
+ const el = document.getElementById('__NEXT_TRANSLATE_DATA__')
+
+ if (!el) return
+
+ const { lang, ns, pathname } = el.dataset as {
+ lang: string
+ ns: string
+ pathname: string
+ }
+
+ const shouldRerender =
+ lang !== window.__NEXT_TRANSLATE__.lang ||
+ pathname !== window.__NEXT_TRANSLATE__.pathname
+
+ window.__NEXT_TRANSLATE__ = { lang, namespaces: JSON.parse(ns), pathname }
+
+ if (shouldRerender && rerender) forceUpdate()
+ }
+
+ return <Component {...props} />
+ }
+
+ const displayName = Component.displayName || Component.name || 'Component'
+ WithTranslation.displayName = `withTranslationClientComponent(${displayName})`
+
+ return WithTranslation
+}