Все изменения в Next.js 14

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

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

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

Turbopack: турбокомпилятор для Next.js

Одним из наиболее значительных нововведений в Next.js 14 является появление Turbopack, инновационного компилятора, заменяющего Webpack. Эта новая система, созданная на языке программирования Rust, обещает революционизировать процесс разработки: время запуска локального сервера ускорится на 53,3%, а обновление кода — на 94,7% быстрее благодаря функции Fast Refresh. Turbopack — это существенный шаг вперед в эффективности локальных разработок , обеспечивающий ощутимые преимущества в скорости и надежности.

Чтобы немедленно протестировать Турбопак:

Убедитесь, что в вашем проекте установлена ​​версия Next.js 14. Вы можете обновить его, изменив зависимость в файле package.json и затем запустив npm install или yarn install.

В некоторых версиях Next.js 14 Turbopack может быть не включен по умолчанию. При необходимости вы можете включить его, добавив флаг в команду запуска. Например, вы можете изменить свой сценарий разработки в package.json с «dev»: «next dev» на «dev»: «next dev –turbo».

Действия сервера: упрощение мутаций данных

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

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

Действия сервера глубоко интегрированы во всю модель App Router. Ты можешь:

• Повторно проверьте кэшированные данные с помощью revalidatePath() или revalidateTag().
• Перенаправление на разные маршруты с помощью redirect().
• Установите и прочитайте файлы cookie через файлы cookies().
• Обрабатывайте оптимистичные обновления пользовательского интерфейса с помощью useOptimistic().
• Захватывайте и отображайте ошибки сервера с помощью useFormState().
• Показать состояния загрузки на клиенте с помощью useFormStatus().

Вот пример:

// app/page.tsx
export default function Page() {
async function createItem(formData) {
'use server';
// Logic to create an item (e.g., save to the database)
return { success: true };
}
// Rest of the component…
}

В том же компоненте теперь вы можете использовать эту функцию напрямую для выполнения действий на стороне сервера, таких как ответ на отправку формы:

// Continued in app/page.tsx
export default function Page() {
async function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const result = await createItem(formData);
if (result.success) {
// Handle the success of the action
}
}
return (
{/* Form elements */} Submit
);
}

Здесь createItem функция выполняется на сервере при отправке формы. Этот подход позволяет эффективно и безопасно выполнять операции на стороне сервера, такие как сохранение данных или другая серверная обработка, непосредственно внутри компонентов React.

Вот пример того, как вы можете структурировать компонент Next.js 14, содержащий две формы, каждая из которых взаимодействует с различными действиями сервера с использованием методов GET и POST:

Определение действий сервера во внешних файлах:

// actions/getData.js
export async function getData() {
  'use server';
  // Logic to retrieve data (GET)
}

// actions/postData.js
export async function postData(formData) {
  'use server';
  // Logic to send data (POST)
}

Создание компонента с двумя формами:

// app/page.tsx
import React from 'react';
import { getData } from '../actions/getData';
import { postData } from '../actions/postData';

export default function Page() {
  async function handleGetSubmit(event) {
    event.preventDefault();
    const result = await getData();
    // Handle the response
  }

  async function handlePostSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const result = await postData(formData);
    // Handle the response
  }

  return (
    <div>
      <form onSubmit={handleGetSubmit}>
        {/* Form elements for GET */}
        <button type="submit">Get Data</button>
      </form>

      <form onSubmit={handlePostSubmit}>
        {/* Form elements for POST */}
        <button type="submit">Post Data</button>
      </form>
    </div>
  );
}

Частичный предварительный рендеринг: объединение статического и динамического

Еще одна экспериментальная функция Next.js 14 — частичный предварительный рендеринг. Эта функция призвана объединить преимущества генерации статического сайта (SSG) и рендеринга на стороне сервера (SSR). Используя границы компонентов React Suspense, частичный предварительный рендеринг определяет, какие части приложения являются статическими, а какие — динамическими. Статические части подготавливаются в формате HTML, а динамические части обновляются только при необходимости. Этот гибридный подход обещает упростить разработку, предлагая статичность и гибкость динамического контента.

Чтобы реализовать частичный предварительный рендеринг в Next.js 14, вы будете использовать функции React Suspense, чтобы определить, какие части вашего приложения могут быть предварительно обработаны статически, а какие необходимо загружать динамически. Вот пример:

Используйте Suspense, чтобы определить динамические части вашего компонента, которые должны быть загружены после загрузки статической оболочки:

// app/page.tsx
import React, { Suspense } from 'react';

const DynamicComponent = React.lazy(() => import('./DynamicComponent'));

export default function Page() {
  return (
    <div>
      <h1>Static Title</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <DynamicComponent />
      </Suspense>
    </div>
  );
}

Определите компонент, который будет загружаться динамически:

// DynamicComponent.tsx
export default function DynamicComponent() {
  // Logic for the dynamic component
  return <div>Dynamic Content</div>;
}

DynamicComponent будет загружен динамически, а остальная часть страницы ( <h1>Static Title</h1>) будет предварительно обработана статически. Этот подход сочетает в себе преимущества генерации статических страниц с гибкостью динамического рендеринга, улучшая производительность и удобство работы с пользователем.

Улучшения метаданных: оптимизация взаимодействия с пользователем

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

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

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

В Next.js 14 теперь есть разделение между блокирующими и неблокирующими метаданными.

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

Следующие параметры метаданных устарели и будут удалены из метаданных в будущей основной версии:

• viewport: устанавливает начальный масштаб и другие свойства видового экрана.
• colorScheme: устанавливает поддерживаемые режимы (светлый/темный) для области просмотра.
• themeColor: устанавливает цвет границы вокруг области просмотра.

Начиная с Next.js 14, появились новые опции viewport и generateViewport варианты замены этих опций. Все остальные параметры метаданных остаются неизменными. Вы можете начать использовать эти новые API уже сегодня, и существующие параметры метаданных продолжат работать.

Учебный курс Next.js: обновленное обучение и ресурсы

Признавая важность образования для разработчиков, Next.js 14 включает в себя новый бесплатный учебный курс ( Next.js Learn ). Этот курс охватывает широкий спектр тем: от маршрутизатора приложений Next.js до аутентификации, интеграции с базами данных Postgres, статического и динамического рендеринга и частичного предварительного рендеринга. Курс предназначен для того, чтобы помочь разработчикам понять и в полной мере использовать возможности платформы.

Интеграция с Strapi и AI Vercel

Интеграция со Strapi, безголовой CMS, является еще одним примечательным аспектом Next.js 14. Это сотрудничество позволяет создавать проекты, которые используют функции обеих систем, предлагая такие функции, как полный CRUD, аутентификация, регистрация и промежуточное программное обеспечение для защищенных путей. . Кроме того, Vercel представила новый SDK для искусственного интеллекта, способствующий интеграции искусственного интеллекта с веб-разработкой и расширяющий возможности создания динамичного и персонализированного контента.

Next.js и искусственный интеллект

Интеграция искусственного интеллекта в Next.js открывает новые горизонты в веб-разработке. С помощью AI SDK Vercel разработчики могут использовать языковые модели для создания персонализированного пользовательского опыта и динамического контента. Такая интеграция особенно интересна для приложений, требующих высокой степени интерактивности и настройки, таких как платформы электронного обучения, виртуальные помощники и системы рекомендаций.

Другие изменения

Вот ряд других изменений, связанных с Next.js 14:

• Изменение: минимальная версия Node.js теперь — 18.17.
• Изменение: удалена цель WASM для сборки следующего SWC (PR).
• Изменение: прекращена поддержка @next/font в пользу next/font (Codemod).
• Изменение: изменен импорт ImageResponse из next/server в next/og (Codemod).
• Изменение: команда next export устарела в пользу output: 'export'.
• Устаревание: onLoadingComplete for next/image устарел в пользу onLoad.
• Устаревание: domains for next/image устарел в пользу remotePatterns.
• Функция: вы можете включить более подробное ведение журнала вокруг кэша выборки (Документация).
• Улучшение: размер функции уменьшен на 80 % для базового приложения создания следующего приложения.
• Улучшение: улучшена обработка памяти при использовании Edge Runtime в разработке.

Заключение

Next.js 14 представляет собой значительный шаг вперед для платформы. Эта версия, ориентированная на улучшение существующих функций, а не на добавление новых, предлагает разработчикам более удобный, эффективный и мощный интерфейс. Благодаря Turbopack, Server Actions, частичному предварительному рендерингу и интеграции со Strapi и искусственным интеллектом Next.js 14 выделяется как идеальное решение для разработки современных и высокопроизводительных веб-приложений. Теперь у разработчиков есть еще более надежный и универсальный инструмент для создания инновационных и эффективных веб-интерфейсов.