Инициализация на стороне клиента в Next.js со статическим экспортом HTML

Мы разрабатываем приложение Next.js, используя для локализации response-i18next. Мы используем next export (статический экспорт HTML). Для библиотеки response-i18next требуется код инициализации, и я не уверен, где называть это.

(Мы не используем next-i18next, поскольку не работает со следующим экспортом .)

Прямо сейчас у меня инициализация в отдельном модуле (вне страниц /). Если я импортирую этот модуль в pages / _app.tsx и запускаю сценарий сборки (next build && next export), сборка зависает. Когда я нажимаю Ctrl-C, я получаю:

Ошибка: setRawMode EIO

То же самое произойдет, если я попытаюсь импортировать его из пользовательского документа.

Мой текущий обходной путь - импортировать модуль инициализации в pages / index.tsx - это работает, но кажется неправильным.

В проекте используются TypeScript и yarn v1, и он был построен с помощью create-next-app (на случай, если что-то из этого актуально).


next.js react-i18next static-html
person TrueWill    schedule 25.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Импорт Custom App действительно является правильным местом для инициализации на стороне клиента. код (выводится на основе настраиваемых полифиллов).

Проблема в том, что модуль _app будет выполняться при вызове next build && next export. Асинхронные вызовы (в моем случае i18next-http-backend) могут привести к зависанию скрипта сборки.

Исправление заключается в том, чтобы обернуть код инициализации в:

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

На основе https://flaviocopes.com/nextjs-server-client-code/

Это означает, что код инициализации не будет работать и для тестов Jest, но response-i18next можно смоделировать < / а>.

person TrueWill    schedule 26.03.2021