PoC: Translations for Next.js fallback pages

__tests__/getFallbackPageNamespaces.test.js

@@ -0,0 +1,100 @@
+import getFallbackPageNamespaces from '../src/getFallbackPageNamespaces'
+
+describe('getFallbackPageNamespaces', () => {
+ let ctx
+ beforeAll(() => {
+ ctx = { query: {} }
+ })
+
+ describe('empty', () => {
+ test('should not return any namespace with empty pages', () => {
+ const input = [{ pages: {} }, '/test-page', ctx]
+ const output = getFallbackPageNamespaces(...input)
+
+ expect(output.length).toBe(0)
+ })
+ test('should not return any namespace with pages as undefined', () => {
+ const input = [{}, '/test-page', ctx]
+ const output = getFallbackPageNamespaces(...input)
+
+ expect(output.length).toBe(0)
+ })
+ })
+
+ describe('regular expressions', () => {
+ test('should return namespaces that match the rgx', () => {
+ const config = {
+ pages: {
+ '*': ['common'],
+ '/example/form': ['valid'],
+ '/example/form/other': ['invalid'],
+ 'rgx:/form$': ['form'],
+ 'rgx:/invalid$': ['invalid'],
+ 'rgx:^/example': ['example'],
+ },
+ }
+ const input = [config, '/example/form']
+ const output = getFallbackPageNamespaces(...input)
+
+ expect(output.length).toBe(4)
+ expect(output[0]).toBe('common')
+ expect(output[1]).toBe('valid')
+ expect(output[2]).toBe('form')
+ expect(output[3]).toBe('example')
+ })
+ })
+
+ describe('as array', () => {
+ test('should return the page namespace', () => {
+ const input = [
+ { pages: { '/test-page': ['test-ns'] } },
+ '/test-page',
+ ctx,
+ ]
+ const output = getFallbackPageNamespaces(...input)
+ const expected = ['test-ns']
+
+ expect(output.length).toBe(1)
+ expect(output[0]).toBe(expected[0])
+ })
+
+ test('should return the page namespace + common', () => {
+ const input = [
+ {
+ pages: {
+ '*': ['common'],
+ '/test-page': ['test-ns'],
+ },
+ },
+ '/test-page',
+ ctx,
+ ]
+ const output = getFallbackPageNamespaces(...input)
+ const expected = ['common', 'test-ns']
+
+ expect(output.length).toBe(2)
+ expect(output[0]).toBe(expected[0])
+ expect(output[1]).toBe(expected[1])
+ })
+ })
+
+ describe('as function', () => {
+ test('should work as a fn', () => {
+ ctx.query.example = '1'
+ const input = [
+ {
+ pages: {
+ '/test-page': ({ query }) => (query.example ? ['test-ns'] : []),
+ },
+ },
+ '/test-page',
+ ctx,
+ ]
+ const output = getFallbackPageNamespaces(...input)
+ const expected = ['test-ns']
+
+ expect(output.length).toBe(1)
+ expect(output[0]).toBe(expected[0])
+ })
+ })
+})

examples/complex/i18n.js

@@ -1,3 +1,5 @@
+const fs = require('fs')
+
 module.exports = {
  locales: ['en', 'ca', 'es'],
  defaultLocale: 'en',
@@ -14,4 +16,10 @@ module.exports = {
  },
  loadLocaleFrom: (locale, namespace) =>
  import(`./src/translations/${namespace}_${locale}`).then((m) => m.default),
+
+ loadLocaleFromSync: (locale, namespace) => {
+ return JSON.parse(
+ fs.readFileSync(`./src/translations/${namespace}_${locale}.json`)
+ )
+ },
 }

examples/complex/src/pages/more-examples/fallback/[slug].tsx

@@ -0,0 +1,43 @@
+import { GetStaticProps } from 'next'
+import getT from 'next-translate/getT'
+import useTranslation from 'next-translate/useTranslation'
+import withFallbackTranslation from 'next-translate/withFallbackTranslation'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+function DynamicRoute({ title = '' }) {
+ const { query } = useRouter()
+ const { t, lang } = useTranslation()
+
+ console.log({ query })
+
+ return (
+ <>
+ <h1>{title}</h1>
+ <h2>{t`more-examples:dynamic-route`}</h2>
+ <h3>
+ {query.slug} - {lang}
+ </h3>
+ <Link href="/">
+ <a>{t`more-examples:go-to-home`}</a>
+ </Link>
+ </>
+ )
+}
+
+export function getStaticPaths({ locales }: any) {
+ return {
+ paths: locales.map((locale: string) => ({
+ locale,
+ params: { slug: 'example' },
+ })),
+ fallback: true,
+ }
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+ const t = await getT(locale, 'common')
+ return { props: { title: t('title') }, revalidate: 5 }
+}
+
+export default withFallbackTranslation(DynamicRoute)

package.json

@@ -47,7 +47,7 @@
  "scripts": {
  "build": "yarn clean && cross-env NODE_ENV=production && yarn tsc",
  "clean": "yarn clean:build && yarn clean:examples",
- "clean:build": "rm -rf lib plugin appWith* Dynamic* I18n* index _context loadNa* setLang* Trans useT* withT* getP* getC* *.d.ts getT transC* wrapT* types",
+ "clean:build": "rm -rf lib plugin appWith* Dynamic* I18n* index _context loadNa* loadFa* setLang* Trans useT* withT* getFa* getP* getC* *.d.ts getT transC* wrapT* withFall* types",
  "clean:examples": "rm -rf examples/**/.next && rm -rf examples/**/node_modules && rm -rf examples/**/yarn.lock",
  "example": "yarn example:complex",
  "example:basic": "yarn build && cd examples/basic && yarn && yarn dev",

src/appWithI18n.tsx

@@ -36,13 +36,58 @@ export default function appWithI18n(
  function AppWithTranslations(props: Props) {
  const { defaultLocale } = config
 
+ var ns = {}
+ var pageProps
+
+ if (typeof window === 'undefined') {
+ if (
+ props.router &&
+ props.router.isFallback &&
+ props.Component &&
+ typeof props.Component.__PAGE_NEXT_NAMESPACES === 'function'
+ ) {
+ ns =
+ props.Component.__PAGE_NEXT_NAMESPACES({
+ locale: props.router.locale,
+ pathname: props.router.pathname,
+ }) || {}
+
+ pageProps = { ...ns, ...props.pageProps }
+ }
+ } else {
+ if (
+ props.Component &&
+ typeof props.Component.__PAGE_NEXT_NAMESPACES === 'function'
+ ) {
+ ns = props.Component.__PAGE_NEXT_NAMESPACES() || {}
+
+ pageProps = { ...ns, ...props.pageProps }
+ }
+ }
+
+ if (pageProps == null) {
+ pageProps = props.pageProps
+ }
+
+ var newProps: any = {
+ ...props,
+ pageProps,
+ }
+
  return (
  <I18nProvider
- lang={props.pageProps?.__lang || props.__lang || defaultLocale}
- namespaces={props.pageProps?.__namespaces || props.__namespaces}
+ lang={pageProps?.__lang || props.__lang || defaultLocale}
+ namespaces={pageProps?.__namespaces || props.__namespaces}
  config={config}
  >
- <AppToTranslate {...props} />
+ <AppToTranslate {...newProps} />
+ <script
+ id="__NEXT_NAMESPACES_DATA__"
+ type="application/json"
+ dangerouslySetInnerHTML={{
+ __html: JSON.stringify(ns || {}),
+ }}
+ />
  </I18nProvider>
  )
  }

src/getFallbackPageNamespaces.tsx

@@ -0,0 +1,35 @@
+import { I18nConfig, PageValue } from '.'
+
+// @todo Replace to [].flat() in the future
+function flat(a: string[][]): string[] {
+ return a.reduce((b, c) => b.concat(c), [])
+}
+
+/**
+ * Get fallback page namespaces
+ *
+ * @param {object} config
+ * @param {string} page
+ */
+export default function getFallbackPageNamespaces(
+ { pages = {} }: I18nConfig,
+ page: string,
+ ctx: object
+): string[] {
+ const rgx = 'rgx:'
+ const getNs = (ns: PageValue): string[] =>
+ typeof ns === 'function' ? ns(ctx) : ns || []
+
+ // Namespaces promises using regex
+ const rgxs = Object.keys(pages).reduce((arr: string[][], p) => {
+ if (
+ p.substring(0, rgx.length) === rgx &&
+ new RegExp(p.replace(rgx, '')).test(page)
+ ) {
+ arr.push(getNs(pages[p]))
+ }
+ return arr
+ }, [])
+
+ return [...getNs(pages['*']), ...getNs(pages[page]), ...flat(rgxs)]
+}

src/index.tsx

@@ -38,10 +38,16 @@ export type LocaleLoader = (
  namespace: string
 ) => Promise<I18nDictionary>
 
+export type LocaleLoaderSync = (
+ language: string | undefined,
+ namespace: string
+) => I18nDictionary
+
 export interface I18nConfig {
  defaultLocale?: string
  locales?: string[]
  loadLocaleFrom?: LocaleLoader
+ loadLocaleFromSync?: LocaleLoaderSync
  pages?: Record<string, PageValue>
  logger?: I18nLogger
  staticsHoc?: Function

src/loadFallbackPageNamespaces.tsx

@@ -0,0 +1,63 @@
+import { LoaderConfig, LocaleLoaderSync } from '.'
+import getConfig from './getConfig'
+import getFallbackPageNamespaces from './getFallbackPageNamespaces'
+
+export default function loadFallbackPageNamespaces(
+ config: LoaderConfig = {}
+): {
+ __lang: string
+ __namespaces?: Record<string, object>
+} {
+ const conf = { ...getConfig(), ...config }
+ const __lang: string =
+ conf.locale || conf.router?.locale || conf.defaultLocale || ''
+
+ if (!conf.pathname) {
+ console.warn(
+ '🚨 [next-translate] You forgot to pass the "pathname" inside "loadNamespaces" configuration'
+ )
+ return { __lang }
+ }
+
+ if (!conf.loaderName && conf.loader !== false) {
+ console.warn(
+ '🚨 [next-translate] You can remove the "loadNamespaces" helper, unless you set "loader: false" in your i18n config file.'
+ )
+ }
+
+ const page = removeTrailingSlash(conf.pathname.replace(/\/index$/, '')) || '/'
+ const namespaces = getFallbackPageNamespaces(conf, page, conf)
+ const defaultLoader: LocaleLoaderSync = () => ({})
+ const pageNamespaces = namespaces.map((ns) =>
+ typeof conf.loadLocaleFromSync === 'function'
+ ? conf.loadLocaleFromSync(__lang, ns)
+ : defaultLoader(__lang, ns)
+ )
+
+ if (conf.logBuild !== false && typeof window === 'undefined') {
+ const color = (c: string) => `\x1b[36m${c}\x1b[0m`
+ console.log(
+ color('next-translate'),
+ `- compiled page:`,
+ color(page),
+ '- locale:',
+ color(__lang),
+ '- namespaces:',
+ color(namespaces.join(', ')),
+ '- used loader:',
+ color(conf.loaderName || '-')
+ )
+ }
+
+ return {
+ __lang,
+ __namespaces: namespaces.reduce((obj: Record<string, object>, ns, i) => {
+ obj[ns] = pageNamespaces[i]
+ return obj
+ }, {}),
+ }
+}
+
+function removeTrailingSlash(path = '') {
+ return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path
+}

src/plugin/index.ts

@@ -81,6 +81,13 @@ export default function nextTranslate(nextConfig: any = {}) {
  '@next-translate-root': path.resolve(dir),
  }
 
+ // translating Next.js fallback pages requires the use of `fs` module
+ if (!options.isServer) {
+ config.node = {
+ fs: 'empty',
+ }
+ }
+
  // we give the opportunity for people to use next-translate without altering
  // any document, allowing them to manually add the necessary helpers on each
  // page to load the namespaces.