Что нового в Next.js 15

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

Основные изменения в Next.js 15

1. Автоматическое обновление с помощью @next/codemod CLI

Next.js 15 предлагает улучшенный инструмент для автоматического обновления проектов до последней версии. С помощью команды:

npx @next/codemod@canary upgrade latest

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

2. Асинхронные API для запросов (Breaking Change)

Next.js 15 переходит к асинхронным API для работы с данными, зависящими от запроса, такими как headers, cookies, params и searchParams. Это изменение направлено на упрощение модели рендеринга и кэширования.

Пример использования асинхронного API:

import { cookies } from "next/headers";

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get("token");
  // ...
}

Для упрощения миграции доступен codemod:

npx @next/codemod@canary next-async-request-api .

3. Изменения в кэшировании (Breaking Change)

Next.js 15 меняет поведение кэширования по умолчанию:

• GET-обработчики маршрутов больше не кэшируются по умолчанию.
• Клиентский кэш маршрутизации больше не кэширует компоненты страниц по умолчанию.

Чтобы вернуть старое поведение, можно использовать настройки в next.config.ts:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};

export default nextConfig;

4. Поддержка React 19

Next.js 15 поддерживает React 19 RC, что позволяет использовать последние возможности React, такие как React Compiler (экспериментальная функция). React Compiler автоматически оптимизирует код, уменьшая необходимость в ручной мемоизации с помощью useMemo и useCallback.

5. Turbopack Dev (стабильная версия)

Turbopack, новый движок для разработки, теперь стабилен и готов к использованию. Он значительно ускоряет запуск локального сервера и обновление кода с помощью Fast Refresh.

Пример улучшений:

• До 76.7% быстрее запуск локального сервера.
• До 96.3% быстрее обновление кода.

6. Индикатор статических маршрутов

В Next.js 15 появился новый визуальный индикатор, который показывает, какие маршруты являются статическими, а какие — динамическими. Это помогает разработчикам лучше понимать, как оптимизировать производительность приложения.

7. API unstable_after (экспериментальный)

Новый API unstable_after позволяет выполнять код после завершения потоковой передачи ответа. Это полезно для задач, которые не должны блокировать основной ответ, таких как логирование или синхронизация с внешними системами.

Пример использования:

import { unstable_after as after } from "next/server";
import { log } from "@/app/utils";

export default function Layout({ children }) {
  after(() => {
    log();
  });
  return <>{children}</>;
}

8. Улучшенные формы (next/form)

Новый компонент <Form> расширяет стандартный HTML <form>, добавляя поддержку предварительной загрузки, клиентской навигации и прогрессивного улучшения.

Пример:

import Form from "next/form";

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

9. Поддержка next.config.ts

Next.js 15 теперь поддерживает TypeScript-файлы для конфигурации (next.config.ts). Это делает настройку более удобной и типобезопасной.

Пример:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* настройки */
};

export default nextConfig;

10. Улучшения для самостоятельного хостинга

Next.js 15 предоставляет больше контроля над заголовками Cache-Control и улучшает оптимизацию изображений при самостоятельном хостинге. Теперь sharp используется автоматически, если не установлен вручную.

11. Улучшенная безопасность Server Actions

Server Actions теперь используют неопределяемые ID для повышения безопасности. Неиспользуемые Server Actions автоматически удаляются из клиентского кода, что уменьшает размер бандла и снижает риск утечки данных.

12. Поддержка ESLint 9

Next.js 15 добавляет поддержку ESLint 9, что позволяет использовать последние возможности линтера. При этом сохраняется обратная совместимость с ESLint 8.

13. Улучшения производительности

Next.js 15 включает множество улучшений производительности, таких как:

• Оптимизация статической генерации для App Router.
• Ускорение Hot Module Replacement (HMR) для Server Components.
• Улучшенное управление статической генерацией с помощью экспериментальных опций.

Заключение

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

Если вы еще не обновились до Next.js 15, сейчас самое время это сделать. Используйте @next/codemod для автоматического обновления и начните пользоваться всеми преимуществами новой версии. Удачи в разработке! 🚀