Next.js Discord

Discord Forum

Cannot get NextJS 14 Internationalization to work at all

Unanswered
Palm Warbler posted this in #help-forum
Open in Discord
Palm WarblerOP
I've spent probably close to 8-10 hours tinkering with i18n and I cant get it to work. I've reached a point where I am effectively giving it a few more hours then swapping off of nextjs entirely since it doesn't seem mature enough of a framework, but I figure I am missing something really simple or I am misunderstanding something fundamental with it. I've tried next-18next, react-18next, next-translate, and 1 other I forgot. Ironically enough, all of them are breaking on SSR with an error message that is almost identical... Cannot read properties of null useRef or useContext .

The app wrappers in _app.ts, example: appWithTranslation or withTranslation similarly error with a "Cannot read properties of null (reading 'useRef')"

If I try to use useTranslation, they all error with a TypeError: Cannot read properties of null (reading 'useContext')

I've tried getStaticProps within index.tsx, I've tried loadLocaleFrom in 18n.js... It implies its not loading the locales correctly.. but I've tried placing them in many different places (public/locales, locales, src/locales to no avail.

Current local layout:
public/locales/en/{common,prefectures}.json
public/locales/ja/{common,prefectures}.json


next.config.js
const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
}


next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'ja',],
    defaultLocale: 'en',
  }
}


src/pages/_app.tsx
import React from 'react'
import NextApp from 'next/app'
import { appWithTranslation } from 'next-i18next'


class MyApp extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}

export default appWithTranslation(MyApp)


src/pages/index.tsx
import { promises as fs } from 'fs'
import React, { useEffect, useState } from 'react';
import type { InferGetStaticPropsType, GetStaticProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'
import Header from '../components/Header';
import TokyoMap from '../components/map/TokyoMap';
import { CityData } from '../components/CityOverviewCharts';
import path from 'path';

type Props = {
  cityData: CityData;
  geoJsonData: any;
};

export default function Home( { props }: InferGetStaticPropsType<typeof getStaticProps>) {
  const { t, i18n } = useTranslation();

  return (
    <>
      <Header />
      <h2>{t('prefectures.tokyo')}</h2>
      {props.cityData && props.geoJsonData ? (
        <TokyoMap geoJsonData={props.geoJsonData} cityData={props.cityData} lang={i18n.language}/>
      ) : (
        <div>Loading...</div>
      )}
    </>
)};

// import static props on SSR
export async function getStaticProps({ locale } : any ) {
  const apiDirectory = path.join(process.cwd(), './public/api')
  let props : Props = {
    cityData: {},
    geoJsonData:{},
  };

  await fs.readFile(path.join(apiDirectory, './tokyo/cities/all.json'), 'utf8')
      .then(data => {
        props.cityData = JSON.parse(data);
      })
      .catch(error => console.error(error));

  await fs.readFile(path.join(apiDirectory, './maps/tokyo.geojson'), 'utf8')
    .then(data => {
      props.geoJsonData = JSON.parse(data);
    })
    .catch(error => console.error(error));
 
  return { props: {
    ...(await serverSideTranslations(locale, [
      'common',
      'prefectures',
    ])),
    props, 
    } 
  };
}

5 Replies

Palm WarblerOP
current error:
TypeError: Cannot read properties of null (reading 'useRef')
    at exports.useRef (/Users/user/git/citydata-nextjs/node_modules/react/cjs/react.production.min.js:26:177)
    at AppWithTranslation (/Users/user/git/citydata-nextjs/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:77:41)
    at Wc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
   Generating static pages (29/31)  [==  ]TypeError: Cannot read properties of null (reading 'useRef')
    at exports.useRef (/Users/user/git/citydata-nextjs/node_modules/react/cjs/react.production.min.js:26:177)
    at AppWithTranslation (/Users/user/git/citydata-nextjs/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:77:41)
    at Wc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/opt/homebrew/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
Palm WarblerOP
Note: this was migrating a CRA to nextjs app with functioning internationalization via react-18next... So why it's so broken now is really confusing.
Sun bear
I am effectively giving it a few more hours then swapping off of nextjs entirely since it doesn't seem mature enough of a framework 😂

First, stop using class components and switch to functional components and hooks, maybe even consider using app router.

Try next-intl, it's my favorite choice for internationalization in next.js. If you are using pages router you should use these [docs](https://next-intl-docs-git-feat-next-13-rsc-next-intl.vercel.app/docs/getting-started/pages-router) to get started and setup internationalized routing.

After getting the routing set up correctly, you can refer to the [usage guide](https://next-intl-docs-git-feat-next-13-rsc-next-intl.vercel.app/docs/usage) for using next-intl in react components.

You can also refer to this [github repo](https://github.com/amannn/next-intl/tree/main/examples) which contains examples for all internationalization you might need, including the pages router example.
Sun bear
Glad to hear you got it working!

Next.js can be a pain as it's doing things in it's own way, which isn't necessarily bad, but can be confusing for the new-comers. If you ever come back to it give app router and server actions a shot. I have never seen a better workflow for front-end applications than this.