Next.js специфика

Chakra UI полностью совместим с Next.js и обеспечивает удобное создание компонентов с готовой системой стилей. Для начала необходимо установить библиотеку и ее зависимости:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки нужно создать обертку для приложения в файле pages/_app.js или pages/_app.tsx:

import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Это обеспечит доступ к Chakra UI во всем приложении, включая страницы и компоненты.

Использование серверного рендеринга (SSR)

Next.js активно использует SSR, что требует корректной работы Chakra UI при рендеринге на сервере. Для предотвращения мерцаний стилей необходимо использовать компонент ColorModeScript. Его подключение осуществляется в файле pages/_document.js:

import { ColorModeScript } from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import theme from "../theme";

export default function Document() {
  return (
    <Html lang="ru">
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Такой подход гарантирует, что цветовая схема (светлая или тёмная) будет корректно загружаться на сервере и применяться при первичном рендеринге.

Настройка темы и глобальные стили

Chakra UI позволяет кастомизировать тему приложения. Создается отдельный файл theme.js:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  config: {
    initialColorMode: "light",
    useSystemColorMode: true,
  },
  styles: {
    global: {
      body: {
        fontFamily: "Inter, sans-serif",
        bg: "gray.50",
        color: "gray.800",
      },
    },
  },
  colors: {
    brand: {
      50: "#e3f2f9",
      100: "#c5e4f3",
      500: "#3182ce",
      900: "#1a365d",
    },
  },
});

export default theme;

extendTheme позволяет расширять базовую тему Chakra, добавлять свои палитры, глобальные стили, шрифты и конфигурации цветовой схемы.

Работа с компонентами в Next.js

Chakra UI предоставляет готовые компоненты, совместимые с SSR и маршрутизацией Next.js. Пример использования кнопки и сетки:

import { Box, Button, Grid } from "@chakra-ui/react";
import Link from "next/link";

export default function HomePage() {
  return (
    <Box p={8}>
      <Grid templateColumns="repeat(3, 1fr)" gap={6}>
        <Box bg="brand.100" p={4} borderRadius="md">
          <Link href="/about">
            <Button colorScheme="brand">О нас</Button>
          </Link>
        </Box>
        <Box bg="brand.100" p={4} borderRadius="md">
          <Button colorScheme="brand">Контакты</Button>
        </Box>
        <Box bg="brand.100" p={4} borderRadius="md">
          <Button colorScheme="brand">Блог</Button>
        </Box>
      </Grid>
    </Box>
  );
}

Важно использовать компонент Link Next.js совместно с Chakra UI, чтобы сохранить клиентскую навигацию и избегать перезагрузки страницы.

Оптимизация для динамических страниц

При использовании динамических маршрутов (pages/[slug].js) Chakra UI корректно работает с асинхронной загрузкой данных. Пример с getStaticProps:

import { Box, Heading, Text } from "@chakra-ui/react";

export async function getStaticProps() {
  const posts = await fetch("https://jsonplaceholder.typicode.com/posts")
    .then(res => res.json());

  return {
    props: { posts },
  };
}

export default function PostsPage({ posts }) {
  return (
    <Box p={8}>
      {posts.slice(0, 10).map(post => (
        <Box key={post.id} mb={4} p={4} borderWidth="1px" borderRadius="md">
          <Heading size="md">{post.title}</Heading>
          <Text mt={2}>{post.body}</Text>
        </Box>
      ))}
    </Box>
  );
}

Использование Chakra UI здесь гарантирует, что визуальные компоненты сохранят стили при генерации страниц на сервере.

Поддержка темной и светлой темы

Chakra UI интегрируется с Next.js для динамического переключения тем. Пример переключателя темы:

import { useColorMode, Button } from "@chakra-ui/react";

export default function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Button onCl ick={toggleColorMode} mt={4}>
      Переключить на {colorMode === "light" ? "тёмную" : "светлую"} тему
    </Button>
  );
}

Компонент ColorModeScript в _document.js и useColorMode обеспечивают согласованное управление цветовой схемой как на сервере, так и на клиенте.

Особенности работы с Chakra UI в Next.js

  • SSR-совместимость: все компоненты корректно рендерятся на сервере без мерцаний и потери стилей.
  • Интеграция с роутером Next.js: Link и динамические маршруты полностью поддерживаются.
  • Оптимизация загрузки стилей: Chakra UI автоматически обрабатывает критические CSS для каждой страницы, что повышает производительность.
  • Модульность и повторное использование: можно создавать отдельные UI-блоки, которые работают одинаково на всех страницах, включая статические и динамические.

Полезные рекомендации

  • Использовать Box и Flex как базовые строительные блоки интерфейса для максимальной гибкости.
  • Создавать кастомные компоненты с forwardRef, чтобы они полностью поддерживали фокус, рефы и работу с формами Next.js.
  • Настраивать тему через extendTheme для единообразного дизайна и соблюдения брендовых цветов.
  • Объединять Chakra UI с библиотеками для форм (например, react-hook-form) для быстрого построения интерактивных страниц.

Chakra UI в связке с Next.js обеспечивает мощный инструмент для создания производительных и стилизованных приложений с поддержкой SSR, динамических маршрутов и полной кастомизацией интерфейса.

Оглавление