Client-side initialization in Next.js with Static HTML Export

Question

We're developing a Next.js app using react-i18next for localization. We're using next export (Static HTML Export). The react-i18next library requires initialization code, and I'm not sure where to call that.

(We're not using next-i18next, as that does not work with next export.)

Right now I have the initialization in a separate module (outside of pages/). If I import that module into pages/_app.tsx and run the build script (next build && next export), the build hangs. When I hit Ctrl-C, I get:

Error: setRawMode EIO

The same thing happens if I try to import it from a custom Document.

My current workaround is to import the initialization module in pages/index.tsx - that works, but feels wrong.

The project uses TypeScript and yarn v1, and was scaffolded with create-next-app (in case any of that is relevant).

TrueWill TrueWill · Accepted Answer · 2021-03-26T17:41:38

A Custom App import does appear to be the correct place for client-side initialization code (inferred based on Custom Polyfills).

The issue is that an _app module will execute when next build && next export is called. Asynchronous calls (i18next-http-backend in my case) can cause the build script to hang.

The fix is to wrap the initialization code in:

if (typeof window !== 'undefined') {
  // initialization code - will only run on client side
}

Based on https://flaviocopes.com/nextjs-server-client-code/

This does mean that the initialization code won't run for Jest tests either, but react-i18next can be mocked.

Client-side initialization in Next.js with Static HTML Export

1 Answers