Интеграция с Next.js

Для интеграции Chakra UI с проектом на Next.js первым шагом является установка необходимых пакетов:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
  • @chakra-ui/react — основной пакет библиотеки.
  • @emotion/react и @emotion/styled — зависимости для стилизации компонентов.
  • framer-motion — используется для анимаций компонентов Chakra UI.

После установки создаётся провайдер ChakraProvider, который оборачивает приложение и предоставляет контекст для всех компонентов Chakra. В Next.js это делается в файле _app.js или _app.tsx:

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

function MyApp({ Component, pageProps }) {
  return (
    
      
    
  );
}

export default MyApp;

При необходимости можно использовать кастомную тему, создавая файл theme.js:

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

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7c0c0",
      500: "#e53e3e",
      900: "#822727",
    },
  },
  fonts: {
    heading: "Montserrat, sans-serif",
    body: "Inter, sans-serif",
  },
});

export default theme;

И подключать её через ChakraProvider:

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

function MyApp({ Component, pageProps }) {
  return (
    
      
    
  );
}

export default MyApp;

Работа с серверным рендерингом (SSR)

Next.js поддерживает SSR, и для корректной интеграции Chakra UI необходимо правильно настроить стили, чтобы избежать проблем с FOUC (Flash of Unstyled Content). Для этого используется кастомный _document.js:

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

class MyDocument extends Document {
  render() {
    return (
      
        
        
          
          

          
        
      
    );
  }
}

export default MyDocument;

ColorModeScript обеспечивает корректную инициализацию темного и светлого режимов до отрисовки контента на клиенте.

Использование компонентов Chakra UI в Next.js

Все стандартные компоненты Chakra UI, такие как Box, Flex, Button, Text, можно использовать напрямую в страницах и компонентах Next.js:

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

export default function HomePage() {
  return (
    
      
        Пример использования Chakra UI
        
      
    
  );
}

Ключевые моменты:

  • Flex позволяет легко управлять расположением элементов с помощью direction, align, justify.
  • Box служит универсальным контейнером для отступов, фона и тени.
  • Стилизация через пропсы (p, bg, shadow, borderRadius) упрощает работу без необходимости писать CSS.

Работа с темами и Color Mode

Chakra UI поддерживает динамическое переключение темного и светлого режимов. Для этого используется хук useColorMode:

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

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

Можно создавать кастомные темы для разных режимов, используя объект config при расширении темы:

const theme = extendTheme({
  config: {
    initialColorMode: "light",
    useSystemColorMode: false,
  },
});

Интеграция с Next.js API и динамическими страницами

Компоненты Chakra UI полностью совместимы с Next.js динамическими страницами и SSR. Например, при рендеринге данных с API:

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

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const post = await res.json();
  return { props: { post } };
}

export default function PostPage({ post }) {
  return (
    
      {post.title}
      {post.body}
    
  );
}
  • Chakra UI не накладывает ограничений на SSR и SSG, компоненты корректно рендерятся как на сервере, так и на клиенте.
  • Использование пропсов стилей позволяет быстро адаптировать внешний вид под данные, полученные с сервера.

Адаптивный дизайн и стилизация

Chakra UI имеет встроенные медиа-запросы через пропсы, что идеально подходит для Next.js:


  Адаптивный контейнер
  • base — для мобильных устройств.
  • md, lg, xl — для больших экранов.
  • Позволяет писать один компонент для всех устройств, без отдельного CSS.

Использование Chakra UI с Next.js Layouts

Next.js поддерживает динамические Layouts, и Chakra UI упрощает создание глобальных макетов:

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

export default function Layout({ children }) {
  return (
    
      {children}
    
  );
}

В страницах можно оборачивать контент:

import Layout from "../components/Layout";

export default function AboutPage() {
  return (
    
      Страница о проекте
    
  );
}
  • Такой подход позволяет сохранять консистентный стиль на всех страницах.
  • Chakra UI обеспечивает удобную систему отступов, фонов и типографики для Layout компонентов.
Оглавление