Ошибка гидратации макета Next.js: не удалось выполнить гидратацию.

Вопрос или проблема

Итак, у меня есть главная страница по адресу “/”. Я хочу, чтобы у неё был другой макет, чем у остальной части моего приложения. Дело в том, что у меня есть некоторые стили CSS для самого HTML. Я пытался добавить их в div, оборачивающий page.tsx, или в основной/body, и почему-то они не применяются.

Вот мой корневой макет в src/app

import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';
import Providers from './Providers';
import { Toaster } from 'sonner';
import './globals.css';
const rubik = Rubik({
  weight: '500',
  subsets: ['latin'],
});

export default async function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html className={`${rubik.className} bg-[#f3f4f6]`} lang="he-IL" dir="rtl">
      <link rel="icon" href="/favicon.ico"  />
      <Providers>
        <body>
          <main>{children}</main>
          <Toaster richColors closeButton />
        </body>
      </Providers>
    </html>
  );
}

А это макет для маршрута “/”, главной страницы. В src/app/(root)/layout.tsx (page.tsx находится в той же папке маршрута)

import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';

import '../globals.css';
import { Toaster } from '@/components/ui/sonner';
import Providers from '../Providers';

const rubik = Rubik({
  weight: '500',
  subsets: ['latin'],
});

export default async function HomeLayout({ children }: { children: ReactNode }) {
  return (
    <html
      className={`${rubik.className} bg-background2 text-[66.6%]`}
      lang="he-IL"
      dir="rtl"
    >
      <link rel="icon" href="/favicon.ico"  />
      <Providers>
        <body>
          <main>{children}</main>
          <Toaster richColors closeButton />
        </body>
      </Providers>
    </html>
  );
}

Таким образом, я получаю ошибку гидратации, и пользовательский интерфейс выглядит плохо. Он инициализируется в rootlayout, а затем HTML меняется, и я получаю размер шрифта 66.6%, поэтому он перерисовывается и выглядит плохо.

Ответ или решение

Гидратация — это важный процесс в Next.js, который обеспечивает синхронизацию состояния компонентов на сервере и клиенте. Ошибка гидратации, с которой вы столкнулись, обычно возникает из-за несоответствия между HTML-кодом, генерируемым на сервере, и тем, который создаётся на клиенте. В вашем случае проблема связана с различиями в стилях и атрибутах HTML между корневым макетом и макетом для главной страницы.

Для решения проблемы, вам нужно убедиться, что структура и стили на сервере и клиенте совпадают. Рассмотрим несколько шагов, которые помогут вам устранить ошибку:

Избегайте изменения HTML в разных макетах: Убедитесь, что корневой макет (RootLayout) и макет главной страницы (HomeLayout) имеют идентичные HTML-элементы, особенно если они устанавливают классы или стили.
Проверка классов и стилей: Убедитесь, что классы, используемые в обоих макетах, не конфликтуют. Например, в вашем HomeLayout вы используете text-[66.6%], который изменяет размер текста. Если это значение не совпадает с корневым макетом, может возникнуть ошибка гидратации. Попробуйте использовать одни и те же классы в обоих макетах или централизуйте их в рамках вашего проекта.
Используйте условные рендеринги: Вы можете настроить рендеринг определённых компонентов в зависимости от маршрута. Например, если вы хотите применить разные стили только для главной страницы, вы можете использовать контекст или состояние, чтобы определить, какой макет использовать, не меняя структуру самого HTML.
Проверка CSS: Убедитесь, что ваши стили из globals.css применяются корректно к обоим макетам. Если у вас есть специфический CSS для главной страницы, возможно, лучшим решением будет импортировать его только в HomeLayout.
Проверка загрузки шрифтов: Важно, чтобы шрифты загружались одинаково для обоих макетов. Убедитесь, что шрифт ‘Rubik’ загружается корректно в обоих случаях.

Вот упрощённая версия вашего кода, которая должна помочь вам избежать ошибки гидратации:

// src/app/(root)/layout.tsx
import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';
import '../globals.css';
import { Toaster } from '@/components/ui/sonner';
import Providers from '../Providers';

const rubik = Rubik({
  weight: '500',
  subsets: ['latin'],
});

export default async function HomeLayout({ children }: { children: ReactNode }) {
  return (
    <html className={`${rubik.className} bg-background2`} lang="he-IL" dir="rtl">
      <link rel="icon" href="/favicon.ico"  />
      <Providers>
        <body>
          <main>{children}</main>
          <Toaster richColors closeButton />
        </body>
      </Providers>
    </html>
  );
}

// src/app/layout.tsx
import { Rubik } from 'next/font/google';
import { ReactNode } from 'react';
import Providers from './Providers';
import { Toaster } from 'sonner';
import './globals.css';

const rubik = Rubik({
  weight: '500',
  subsets: ['latin'],
});

export default async function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html className={`${rubik.className} bg-[#f3f4f6]`} lang="he-IL" dir="rtl">
      <link rel="icon" href="/favicon.ico"  />
      <Providers>
        <body>
          <main>{children}</main>
          <Toaster richColors closeButton />
        </body>
      </Providers>
    </html>
  );
}

Этот код устраняет изменения в классах при гидратации и должен помочь вам избежать ошибки. Если проблема сохраняется, рассмотрите возможность использования уровня состояния для управления различиями в контенте или атрибутах HTML.

Также полезно следить за консольными сообщениями в браузере — они могут дать больше информации о том, какая именно ошибка гидратации происходит и что её вызывает.