Next.js позаботится о многих оптимизациях вашего приложения React, поэтому вам не придется
Next.js — это самоуверенный фреймворк React , в который встроен ряд оптимизаций производительности. Основная идея этого фреймворка — обеспечить запуск и сохранение максимальной производительности приложений за счет включения этих возможностей по умолчанию.
В этом введении кратко описываются многие функции, предоставляемые платформой на высоком уровне. В других руководствах из этой коллекции эти функции будут рассмотрены более подробно.
Чему вы научитесь?
Хотя Next.js по умолчанию предоставляет ряд оптимизаций производительности, эти руководства призваны объяснить их более подробно и показать, как их можно использовать для создания быстрой и производительной среды.
К сайтам React в целом можно добавить множество оптимизаций, которые также будут работать для приложений, созданных с помощью Next.js. Они не будут рассматриваться, поскольку основное внимание уделяется конкретному функционалу Next.js. Чтобы узнать больше об общей оптимизации React, ознакомьтесь с нашей коллекцией React .
Чем Next.js отличается от React?
React — это библиотека, которая упрощает создание пользовательских интерфейсов с использованием компонентного подхода. Несмотря на свою мощь, React представляет собой библиотеку пользовательского интерфейса. Многие разработчики включают дополнительные инструменты, такие как сборщик модулей (например, Webpack ) и транспилятор (например, Babel ), чтобы иметь полную цепочку инструментов сборки.
В коллекции React мы использовали подход Create React App (CRA) для быстрого запуска приложений React. CRA избавляет от хлопот при настройке приложения React, предоставляя полный набор инструментов сборки с помощью одной команды.
Несмотря на то, что в CRA встроено несколько оптимизаций по умолчанию, цель инструмента — обеспечить простую и понятную настройку. Разработчикам предоставляется возможность решить, следует ли удалять и изменять конфигурации самостоятельно.
Next.js, который также можно использовать для создания нового приложения React, использует другой подход. Он сразу же предоставляет ряд распространенных оптимизаций, которые многие разработчики хотели бы иметь, но их сложно настроить, например:
- Серверный рендеринг
- Автоматическое разделение кода
- Предварительная выборка маршрута
- Маршрутизация файловой системы
- Стиль CSS-in-JS (
styled-jsx)
Настройка
Чтобы создать новое приложение Next.js, выполните следующую команду:
npx create-next-app new-app
Затем перейдите в каталог и запустите сервер разработки:
cd new-app
npm run dev
Следующая вставка показывает структуру каталогов нового приложения Next.js.
- Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим
.
Обратите внимание, что каталог pages/ создается с одним файлом: index.jsx . Next.js использует подход маршрутизации файловой системы, при котором каждая страница в этом каталоге обслуживается как отдельный маршрут. Создание нового файла в этом каталоге, например about.js , автоматически создаст новый маршрут ( /about ).
Компоненты также можно создавать и использовать, как и любое другое приложение React. components/ уже создан с одним компонентом nav.js , который уже импортирован в index.js . По умолчанию каждый импорт, используемый в Next.js, извлекается только при загрузке этой страницы, что обеспечивает преимущества автоматического разделения кода .
Более того, каждая начальная загрузка страницы в Next.js обрабатывается на стороне сервера . Если вы откроете панель «Сеть» в DevTools, вы увидите, что первоначальный запрос документа возвращает страницу, полностью визуализированную сервером.
Это лишь некоторые из многих функций, предоставляемых Next.js автоматически. Многие из них настраиваются и могут быть изменены для различных случаев использования.
Что дальше?
Каламбур задуман 😛
В каждом другом руководстве из этой коллекции подробно рассматривается конкретная функция Next.js:
- Предварительная загрузка маршрута для ускорения навигации по страницам
- Обслуживание гибридных страниц и страниц только AMP для более быстрой загрузки из поисковых систем.
- Компоненты разделения кода с динамическим импортом для уменьшения объема JavaScript.