~ 4 мин
Что нового в Next.js v13?
105
4/27/2023
Узнайте о новых функциях и улучшениях в Next.js 13, включая Turbopack, новый Image компонент и улучшенную поддержку Data Fetching. Узнайте, как эти изменения помогут ускорить разработку и улучшить производительность вашего приложения.
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" /> }
Взгляните на наш стартап:
Выбирай экскурсии и активности по всему миру
Уже зарегистрировано 0 стран, 0 направлений, 0 экскурсий
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию