Error when adding serverside translations to my next.js app

Question

I am getting an error when deploying my app to vercel, but my app work perfectly fine on local server. Here is what my function logs looks like

TypeError: Cannot read properties of undefined (reading '__NEXT_DATA__')
    at Document (/var/task/.next/server/pages/_document.js:24:26)

Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/en'

my _document.js

export default function Document(props) {
  const locale = props.__NEXT_DATA__.locale;
  console.log(props.__NEXT_DATA__);
  const dir = locale === "ar" ? "rtl" : "ltr";
  return (
    <Html dir={dir} lang={locale}>
      <Head />
      <body className={locale === "ar" ? "rtl" : null}>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

score 0 · Answer 1 · answered Jun 29 '22 at 15:33

0

I found the answer, I had to specify my locales folder in my config file like so

const path = require("path");
module.exports = {
  i18n: {
    localePath: path.resolve("./public/locales"),
  },
  trailingSlash: true,
};

answered Jun 29 '22 at 15:33

Ahmed Elhoseny

77
5

Error when adding serverside translations to my next.js app

1 Answers1