Что нового в Next.js v13?

Next.js 13 анонсирован на Next.js Conf с новыми функциями и улучшениями! Одна из наиболее значимых новых функций - это директория приложения (app/ directory), которая упрощает создание сложных интерфейсов и позволяет сохранять состояние между переходами, избегать повторных рендерингов и использовать расширенные маршрутные шаблоны.

Но не спешите использовать директорию приложения в продакшн-среде, так как она находится в бета-версии. Вы можете продолжать использовать директорию pages и наслаждаться улучшенными компонентами next/image и next/link, которые также доступны в новой версии. Переход на новую директорию можно осуществлять постепенно, по мере готовности.

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Новая директория приложения app Directory (app/)

В директории приложения (app/ directory) появилась поддержка Server Components в React, которые позволяют создавать быстрые и интерактивные приложения. Это уменьшает количество кода, отправляемого на клиент, и позволяет быстрее загружать страницы. При загрузке маршрута загружается необходимый код, который кэшируется и имеет предсказуемый размер, что улучшает производительность приложения.

Стриминг

Директория приложения (app/ directory) позволяет пошагово передавать и отображать части пользовательского интерфейса на клиенте во время загрузки страницы. Это позволяет мгновенно отображать те части страницы, которые не требуют дополнительных данных, и показывать состояние загрузки для частей, которые загружаются дополнительно. Такой подход позволяет пользователям начинать взаимодействие с приложением даже до того, как загрузится весь контент страницы.

Когда приложение на основе Next.js 13 с директорией app/ развертывается на Vercel, оно автоматически передает отрендеренные части страницы по мере их готовности, что улучшает производительность.

Загрузка данных (Data Fetching)

Data Fetching - это способ загрузки информации из внешних источников, таких как API, и её отображение в приложении. С помощью директории app/ вы можете получать данные из компонентов, страниц и макетов. Новая версия React и Next.js упрощает обработку состояний загрузки и ошибок, а также потоковую передачу данных при рендеринге, что означает, что ваше приложение может отображать информацию по мере её доступности, а не ждать, пока всё загрузится, прежде чем пользователь увидит что-либо. Кроме того, React и Next.js теперь предоставляют один гибкий способ получения, кэширования и повторной проверки данных на уровне компонентов. Это означает, что все преимущества статической генерации сайтов, рендеринга на стороне сервера и инкрементальной статической регенерации теперь доступны через одно API.

Turbopack (Alpha)

В Next.js 13 появился новый инструмент для сборки проектов - Turbopack. Это преемник Webpack, написанный на языке Rust. Webpack был неотъемлемой частью разработки веб-приложений, но мы достигли предела максимальной производительности, возможной при использовании инструментов на базе JavaScript.

В Next.js 12 мы начали переход к нативным инструментам, написанным на Rust. Сначала мы заменили Babel, что привело к 17-кратному ускорению транспиляции, затем - Terser, что ускорило минификацию в 6 раз. Теперь мы готовы использовать нативные средства для сборки проектов.

Использование Turbopack в Next.js 13 позволяет обновлять проект в 700 раз быстрее, чем в Webpack, в 10 раз быстрее, чем в Vite, и запускать проект в 4 раза быстрее, чем в Webpack. Turbopack использует только минимальный набор ресурсов, необходимых для разработки, поэтому время запуска очень быстрое.

Turbopack поддерживает Server Components, TypeScript, JSX, CSS и другие функции. Но в альфа-версии многие функции еще не поддерживаются.

Обратите внимание, что Turbopack в Next.js в настоящее время поддерживает только next dev. Мы также работаем над поддержкой next build через Turbopack. Чтобы попробовать Turbopack в Next.js 13, используйте next dev --turbo.

Для справки

next/image

В Next.js 13 появился новый компонент Image, который позволяет легко отображать изображения без сдвига макета (layout shifting) и оптимизировать файлы по требованию для увеличения производительности. С помощью него можно улучшить Core Web Vitals на вашем сайте. Новый Image компонент легче настраивается, требует обязательное указание alt для лучшей доступности и поддерживает ленивую загрузку, что ускоряет отображение.

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

import Image from 'next/image'
import avatar from './lee.png'

function Home() {
  // опционально файлы сайта, могут быть расположены внутри app/-директории
  return <Image alt="leeerob" src={avatar} placeholder="blur" />
}