5 практик, которые облегчат работу с Next.js 14

Next.js 14 — мощный React-фреймворк, позволяющий упростить процесс создания React-приложений с рендерингом на стороне сервера. Однако расширенные возможности и соглашения Next.js 14 могут приводить в замешательство разработчиков. Особенно много проблем возникает у тех, кто недавно приступил к освоению фреймворка. Рассмотрим пять практик, которые облегчат использование Next.js 14.

1. Работа с изображениями Next.js

Один из аспектов, вызывающих недоумение, — это работа с изображениями в Next.js. Этот процесс зависит от того, с какими изображениями вы работаете — локальными или удаленными.

Локальные изображения

Для работы с локальными изображениями не нужно указывать ширину и высоту. Next.js автоматически определит размеры. Просто импортируйте изображение и отобразите его с помощью компонента next/image.

import Image from "next/image";
import localImage from "public/hoy.png";
export default function MyComponent() {
  return <Image src={localImage} alt="Local Image" />;
}

Удаленные изображения

При работе с удаленными изображениями необходимо указать местозаполнитель размытия и задать ширину и высоту, чтобы предотвратить смещение макета. Можете использовать свойство placeholder=”blur”, чтобы показать размытую версию изображения, пока не загрузится полное изображение.

Чтобы сгенерировать URL-адрес данных размытия для удаленных изображений, можно использовать пакеты sharp и placeholder:

import Image from "next/image";
import getBase64 from "./utils/getBase64";
export default async function MyComponent() {
  const blurDataUrl = await getBase64(remoteImageUrl);
  return (
    <Image
      src={remoteImageUrl}
      width={600}
      height={600}
      alt="Remote Image"
      placeholder="blur"
      blurDataURL={blurDataUrl}
    />
  );
}

Утилита getBase64 получает удаленное изображение, преобразует его в ArrayBuffer, а затем генерирует представление base64 с помощью пакета placeholder.

2. Работа с переменными среды

Будьте осторожны при обозначении переменных среды с помощью next.config.env.NEXT_PUBLIC_, поскольку эти переменные будут открыты в браузере и включены в пакет JavaScript. Если у вас есть конфиденциальные API-ключи или секреты, убедитесь, что они не имеют префикса NEXT_PUBLIC_. В этом случае они будут доступны только в среде Node.js.

3. Управление кэшированием в Next.js

Поведение кэширования Next.js различается в зависимости от сред разработки и производства. В режиме разработки страницы по умолчанию отображаются динамически при каждом запросе. Однако в режиме производства Next.js пытается отображать страницы статически.

Чтобы контролировать кэширование в среде производства, можно использовать опцию revalidate или явно пометить страницу как “dynamic”.

// Повторная валидация каждые 5 секунд
export const revalidate = 5
// Принудительный динамический рендеринг
export const dynamic = 'force-dynamic'

4. Получение данных в серверных компонентах

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

Если необходимо повторно использовать одну и ту же логику получения данных в нескольких компонентах, подумайте о создании серверного действия в каталоге server/.

export async function getJoke() {
  const res = await fetch("https://api.example.com/joke");
  const data = await res.json();
  if (res.ok) {
    return { success: true, joke: data.joke };
  } else {
    return { error: data.error };
  }
}
// app/page.jsx
import { getJoke } from "../server/actions";
export default async function Page() {
  const { success, joke, error } = await getJoke();
  if (success) {
    return <div>{joke}</div>;
  } else {
    throw new Error(error);
  }
}

5. Использование клиентских и серверных компонентов

По умолчанию страницы в Next.js являются серверными компонентами. Можно отображать клиентские компоненты внутри серверных компонентов, чтобы добавить интерактивности.

"use client";
import { useState } from "react";
export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Дочерние компоненты, отображаемые внутри клиентского компонента, автоматически становятся клиентскими компонентами без необходимости использования директивы use client.

При работе с провайдерами (например, с провайдером тематического оформления) оберните дочерние компоненты провайдера в макете, и они по-прежнему будут отображаться как серверные компоненты.

// app/layout.jsx
import { ThemeProvider } from "your-theme-library";
export default function RootLayout({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Заключение

Next.js 14 — мощный и многофункциональный фреймворк, который упрощает разработку React-приложений с рендерингом на стороне сервера. Несмотря введение в эту технологию новых концепций и соглашений, следование вышеописанным практикам и рекомендациям поможет сориентироваться в затруднительных ситуациях.

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

Помните: практика — ключ к освоению любой новой технологии. Чтобы до конца разобраться во всех нюансах работы Next.js, тщательно изучайте его документацию, присоединяйтесь к форумам сообщества и экспериментируйте с возможностями фреймворка.

Читайте также:

• Лучшие библиотеки и пакеты Next.js 2024 года для любых потребностей
• Шаблоны рендеринга Next JS: полное руководство
• Создание готового к производству приложения React с помощью Next.js и Dokku

Читайте нас в Telegram, VK и Дзен 

---

Перевод статьи Skanda Aryal: 5 Tips and Tricks To Make Your Life With Next.js 14 Easier