Использование Context API в Next.js

Хуки useState и useReducer в сочетании с техникой "prop drilling" покроют множество случаев использования для большинства базовых приложений, которые вы создаете. Но что, если ваше приложение намного сложнее, props должны передаваться на несколько уровней вниз, или у вас есть некоторые состояния, которые должны быть доступны глобально? В этом случае рекомендуется избегать "prop drilling" и использовать Context API, который позволит вам получить глобальный доступ к состоянию. Всегда рекомендуется создавать отдельные контексты для различных состояний, таких как аутентификация, пользовательские данные и так далее. Мы создадим пример управления состоянием темы. Сначала создадим отдельную папку в корне сайта и назовем ее context. Внутри нее создайте новый файл theme.js и включите в него следующий код:

import { createContext, useContext, useState } from "react";

const Context = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <Context.Provider value={[theme, setTheme]}>{children}</Context.Provider>
  );
}

export function useThemeContext() {
  return useContext(Context);
}

Сначала мы создали новый объект Context, создали функцию ThemeProvider и установили начальное значение для Context - light. Затем мы создали пользовательский хук useThemeContext, который позволит нам получить доступ к состоянию темы после того, как мы импортируем ее на отдельные страницы или компоненты нашего приложения. Далее нам нужно обернуть ThemeProvider вокруг всего приложения, чтобы мы могли получить доступ к состоянию темы во всем приложении. Перейдите в файл _app.js и включите в него следующий код:

import { ThemeProvider } from "../context/theme";

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Чтобы получить доступ к состоянию темы, перейдите в файл index.js и включите в него следующий код:

// 'use client' // if using /app folder

import Link from "next/link";
import { useThemeContext } from "../context/theme";

export default function Home() {
  const [theme, setTheme] = useThemeContext();
  return (
    <div>
      <h1>Welcome to the Home page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
      <p>Current mode: {theme}</p>
      <button
        onClick={() => {
          theme == "light" ? setTheme("dark") : setTheme("light");
        }}
      >
        Toggle mode
      </button>
    </div>
  );
}

Сначала мы импортировали useThemeContext, затем получили доступ к состоянию темы и функции setTheme, чтобы обновить его при необходимости. Внутри события onClick кнопки переключения мы создали функцию обновления, которая переключает противоположные значения между светлым и темным в зависимости от текущего значения.

Доступ к контексту через маршруты

Next.js использует папку pages для создания новых маршрутов в вашем приложении. Например, если вы создадите новый файл route.js, а затем обратитесь к нему откуда-нибудь через компонент Link, он будет доступен через /route в вашем URL. В предыдущем фрагменте кода мы создали маршрут к маршруту About. Это позволит нам проверить, что состояние темы доступно глобально. В настоящее время этот маршрут не существует, поэтому давайте создадим новый файл about.js в папке pages и включим в него следующий код:

// 'use client' // if using /app folder

import Link from "next/link";
import { useThemeContext } from "../context/theme";

export default function Home() {
  const [theme, setTheme] = useThemeContext();
  return (
    <div>
      <h1>Welcome to the About page</h1>
      <Link href="/">
        <a>Home</a>
      </Link>
      <p>Currently active theme: {theme}</p>
      <button
        onClick={() => {
          theme == "light" ? setTheme("dark") : setTheme("light");
        }}
      >
        Toggle mode
      </button>
    </div>
  );
}

Мы создали очень похожую структуру кода, которую использовали ранее в маршруте Home. Единственными отличиями стали заголовок страницы и другая ссылка для перехода в Home. Теперь попробуйте переключить активную тему и переключиться между маршрутами. Обратите внимание, что состояние сохраняется в обоих маршрутах. В дальнейшем вы можете создавать различные компоненты, и состояние темы будет доступно в любом месте дерева файлов приложения.

Получение данных из API

Предыдущие методы будут работать при внутреннем управлении состояниями в приложении. Однако в реальной жизни вы, скорее всего, будете получать данные из внешних источников через API. Вкратце получение данных можно описать как выполнение запроса к конечной точке API и получение данных после обработки запроса и отправки ответа. Нужно учитывать, что этот процесс не является мгновенным, поэтому нам нужно управлять состояниями ответа, например состоянием ожидания, пока ответ готовится. Мы также будем обрабатывать случаи возможных ошибок. Отслеживание состояния ожидания позволяет нам отображать анимацию загрузки для улучшения UX, а состояние ошибки дает нам знать, что ответ был неудачным. Это позволит нам вывести сообщение об ошибке, дающее дополнительную информацию о ее причине.

API Fetch и хук useEffect

Одним из наиболее распространенных способов обработки данных является использование комбинации родного Fetch API и хука useEffect Hook. Хук useEffect позволяет нам выполнять побочные эффекты после завершения какого-либо другого действия. С его помощью мы можем отследить, когда приложение было отрисовано и можно смело выполнять вызов выборки. Чтобы получить данные в Next.js, преобразуйте index.js следующим образом:

// 'use client' // if using /app folder

import { useState, useEffect } from "react";

export default function Home() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    fetch('api/book')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
  if (isLoading) return <p>Loading book data...</p>
  if (!data) return <p>No book found</p>

  return (
    <div>
      <h1>My favorite book:</h1>
      <h2>{data.title}</h2>
      <p>{data.author}</p>
    </div>
  )
}

Как показано в примере выше, мы имеем прямой доступ к серверному процессу и можем создать компонент async. Мы также смогли подключиться к базе данных MongoDB непосредственно из компонента, что свойственно серверным фреймворкам и языкам вроде Express и PHP. В этом и заключается вся прелесть серверных компонентов. Однако это также означает, что мы не можем использовать в этих компонентах клиентские хуки, такие как useState() и useEffect(). Хотя серверные компоненты доминируют в маршрутизаторе /app, вам все еще могут понадобиться компоненты на стороне клиента, которые взаимодействуют с окружением браузера. Чтобы создать традиционный компонент на стороне клиента, просто включите оператор 'use client' в верхнюю часть файла компонента, как показано ниже:

'use client'
import { useState} from 'react';

export default function MyClientComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Таким образом, вы получаете доступ к традиционным хукам, как обычно, и можете выполнять интерактивность на стороне клиента. Как уже говорилось ранее, серверные компоненты не могут напрямую использовать такие хуки, как useState() или useEffect(), однако вы можете использовать такие библиотеки, как Zustand, для управления состояниями даже на сервере. Тем не менее, как правило, не рекомендуется управлять сложными состояниями приложения на сервере из-за потенциальных последствий для производительности и несоответствия данных. Дополнительную информацию по этому вопросу можно найти на Github. Применяйте серверные механизмы хранения, такие как cookies или сессии, для данных с состояниями, которые должны сохраняться в течение сеансов пользователя. Они идеально подходят для обработки состояний аутентификации, предпочтений пользователей или данных, которые не меняются регулярно. Например, вы можете получить доступ к пользовательским файлам cookie в серверном компоненте, как показано ниже:

import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ))
}

Заключение

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

Новички часто испытывают трудности и выбирают чрезмерно сложные решения для управления простыми состояниями, но со временем все становится лучше, а единственный способ улучшить это - практика. Надеемся, эта статья помогла вам сделать шаг в правильном направлении к достижению этой цели.