Как исправить ошибку «Text content did not match» в Next.JS?

Question

[uRoot]

Есть такой импорт, сейчас я делаю так:

import { MultiLangProvider } from "../context/MultiLang/MultiLang";

В самом MultiLangContext есть два экспорта:
export { MultiLangContext, MultiLangProvider };

Внутри контекста есть работа с localStorage. Я пробую ошибку пофиксить так:

const MultiLangProvider = dynamic(() => import('../context/MultiLang/MultiLang').then((res) => res.MultiLangProvider, { ssr: false }))

Ну а дальше просто импортирую:

return (
      <MultiLangProvider>
        <Component {...pageProps} />
      </MultiLangProvider>
  )

Но ошибку это не фиксит. Что я делаю не так?

Answer 1

[Егор Живагин]

Я думаю, что через dynamic + ssr: false нужно подключать не контекст/провайдер, а сам компонент, который работает со значением из стораджа и меняет разметку в зависимости от него

Comments

[uRoot]

А эти компоненты я планирую использовать с SSR. Логика такая: на фронте в localStorage записан язык. На его основе делается запрос за статьей (ру или англ).

[Егор Живагин]

Так на SSR в любом случае нет доступа к localStorage, запрос придётся делать на клиенте
Либо перенести данные в куки, некст должен предоставлять к ним доступ, они прилетают на сервер в request headers

[uRoot]

Так на SSR в любом случае нет доступа к localStorage, запрос придётся делать на клиенте

Егор Живагин, ну про это я в курсе, спасибо. А ещё такой вопрос. В getStaticPaths я должен получить все статьи и сгенерить массив объектов с параметрами для URL-а. Дефолтный пример выглядит так:

const paths = sampleUserData.map((user) => ({
    params: { id: user.id.toString() },
  }))

  return { paths, fallback: false }

На выходе у меня в paths лежит это:

[
  { params: { id: '101' } },
  { params: { id: '102' } },
  { params: { id: '103' } },
  { params: { id: '104' } }
]

А если у меня есть ещё параметр lang и каждая статья может быть в двух языковых вариантах, то получается что, я должен каждую статью перебрать два раза, чтобы я получил такой массив объектов в paths?

[
  { params: { id: '101', lang: 'en' } },
  { params: { id: '102', lang: 'en' } },
  { params: { id: '103', lang: 'en' } },
  { params: { id: '104', lang: 'en' } }

  { params: { id: '101', lang: 'ru' } },
  { params: { id: '102', lang: 'ru' } },
  { params: { id: '103', lang: 'ru' } },
  { params: { id: '104', lang: 'ru' } }
]

Чтобы статьи были доступны по URL-ам: localhost/en/1729 и localhost/ru/1729. Я правильно понял момент с двойным перебором?

P.S. просто мне бэк присылает 1 раз статью с параметром lang, где лежат доступные языковые варианты.