BackНазад к блогу

Next.js 9.1

Next.js 9.1 расширяет поддержку различных структур проектов за счёт использования конвенций. Также представлены предварительные возможности, такие как импорт CSS, улучшенная сборка и статические страницы ошибок.

Сегодня мы рады представить Next.js 9.1 с поддержкой директорий src и public.

Новое в этом релизе

  • Поддержка директории src: Теперь директория pages может находиться внутри папки src, что поддерживает больше вариантов организации приложений.
  • Поддержка директории public: Определите файлы, которые будут доступны в корне URL вашего приложения (например, favicon.ico).

Предварительный просмотр в этом релизе

  • Встроенная поддержка CSS: Скоро приложения смогут импортировать глобальные CSS-стили с горячей перезагрузкой в разработке и продвинутыми оптимизациями для production.
  • Статические страницы ошибок: Статический экспорт ожидаемых страниц ошибок (например, 404) для лучшей доступности (CDN).
  • Module / Nomodule: Отправка меньших JavaScript-бандлов пользователям современных браузеров.
  • Улучшенное разделение бандлов: Меньший объём передаваемых данных для улучшения TTI и скорости перехода между страницами. Крупные библиотеки также кэшируются на долгий срок между деплоями.

Как всегда, мы стремимся обеспечить обратную совместимость всех этих улучшений. Для обновления достаточно выполнить:

Terminal
npm i next@latest react@latest react-dom@latest

Если ваше приложение использует версию Next.js ниже 9, ознакомьтесь с руководством по обновлению для внесения необходимых изменений.

Со времени нашего последнего крупного релиза такие компании как TikTok, Hilton, Elastic, Realtor и JW Player запустили проекты на Next.js. Посмотрите примеры!

Поддержка директории src

В Next.js есть специальная директория pages, где каждый файл становится отдельным маршрутом. Следуя принципу "конвенция вместо конфигурации", эта директория должна находиться в корне приложения.

В ходе общения с компаниями, использующими Next.js, и анализа закрытых кодовых баз мы выявили распространённый запрос разработчиков — возможность размещать директорию pages внутри папки src.

Начиная с Next.js 9.1, теперь можно создавать директорию src/pages вместо размещения pages в корне приложения.

Использование директории src является опциональным и покрывает случаи, когда в вашей компании уже принят такой стандарт.

Директория pages внутри src

Директория pages внутри src

Поддержка директории public

Помимо директории pages, в Next.js есть ещё одна специальная директория под названием static, файлы из которой маппились на маршрут /static.

Например, static/my-image.png соответствовал /static/my-image.png.

Эта конвенция хорошо работала с самого первого релиза Next.js и не вызывала особых проблем.

Однако со временем мы поняли, что /static не покрывает все потребности веб-приложения. Например, robots.txt должен обслуживаться из корня домена.

Начиная с Next.js 9.1 мы вводим новую директорию под названием public.

Любые файлы в директории public будут маппиться на корень домена.

Например, public/robots.txt будет соответствовать /robots.txt.

Поскольку public также покрывает вариант использования директории static, мы решили объявить static устаревшей в пользу создания папки public/static с той же функциональностью.

Как всегда, мы стремимся к обратной совместимости, поэтому директория static продолжит работать с предупреждением об устаревании.

Скоро в релизе

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

Встроенная поддержка CSS

В настоящее время Next.js имеет встроенное решение для CSS-in-JS под названием styled-jsx. Оно хорошо подходит для стилизации отдельных React-компонентов.

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

Обычно это означает добавление плагина next-css для поддержки импорта CSS.

Мы выяснили, что около 50% всех пользователей Next.js добавляют этот плагин в свои приложения.

Из-за такого широкого использования мы добавляем встроенную поддержку импорта CSS с автоматической перезагрузкой стилей в разработке и оптимизациями для production, которые ранее были невозможны в плагине next-css.

Первоначальная реализация сейчас тестируется на production-приложениях Next.js.

Сначала будет добавлен импорт глобальных CSS:

pages/_app.js
// Глобальные стили можно импортировать из _app.js
import '../styles/global.css';
import App from 'next/app';
 
export default App;

После глобальных CSS мы добавим поддержку CSS-модулей через расширение .module.css:

pages/index.js
// Локальные стили импортируются через .module.css
import styles from '../styles/index.module.css';
 
export default function HomePage() {
  return <h1 className={styles.heading}>Hello World</h1>;
}

Это позволит обеспечить значительно лучший опыт разработки при использовании импорта CSS.

Подробнее о текущей работе можно прочитать в RFC на GitHub.

Статические страницы ошибок

В Next.js есть специальная страница, которая отображается при возникновении ошибки. Внутренне она называется /_error. Пользователи могут кастомизировать эту страницу, создав файл pages/_error.js, экспортирующий React-компонент.

Ошибки обычно делятся на 2 типа: ожидаемые и неожиданные.

Ожидаемые ошибки — это, например, страница 404.

Неожиданная ошибка — это, например, ошибка, выброшенная в getInitialProps или при рендеринге React-дерева, что приводит к отображению 500.

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

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

Ещё одно преимущество статической страницы — возможность автоматического кэширования при использовании CDN.

Сотрудничество с Google Chrome

Как упоминалось в анонсе Next.js 9, команда Google Chrome инвестирует ресурсы в улучшение Next.js и работает над несколькими инициативами для масштабного повышения производительности всех приложений Next.js.

Чтобы узнать больше об этом сотрудничестве, прочитайте анонс Next.js 9 и посмотрите доклад Nicole Sullivan на React Rally.

Module / Nomodule

При написании кода на Next.js вы обычно используете "современный" JavaScript. Вы можете применять все последние стабильные функции, и Next.js автоматически позаботится о трансформации или полифиллинге этого кода с помощью Babel.

На данный момент многие из этих возможностей JavaScript поддерживаются большинством браузеров. Однако обычно (включая Next.js) код поставляется в виде единого JavaScript-бандла, который работает во всех поддерживаемых браузерах.

В случае Next.js это означает компиляцию современного JavaScript в формат, совместимый с Internet Explorer 11.

Например, в настоящее время Next.js должен предоставлять полифиллы для синтаксиса async/await, так как код может выполняться в браузерах, которые не поддерживают async/await, что приведёт к ошибке.

Чтобы избежать поломки старых браузеров, одновременно отправляя современный JavaScript в браузеры с поддержкой нового синтаксиса, Next.js будет использовать паттерн module/nomodule. Этот паттерн предоставляет надёжный механизм для отправки современного JavaScript современным браузерам, позволяя старым браузерам использовать полифилленный ES5-код.

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

Улучшенное разделение бандлов

В настоящее время Next.js загружает несколько JavaScript-бандлов для обеспечения интерактивности страницы. Наиболее значимые:

  • Бандл страницы.
  • Файл с общим JavaScript.
  • Бандл клиентской части Next.js.
  • Динамические импорты (обычно добавляются через next/dynamic).

Чтобы страница стала интерактивной, все эти бандлы должны загрузиться, так как они взаимозависимы для запуска React в браузере.

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

По этой причине существует бандл commons, содержащий общий JavaScript между страницами. Текущая стратегия разделения бандлов для генерации commons основана на эвристике соотношения: если модуль используется в 50% всех страниц, он помечается как общий.

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

Наша цель — оптимизировать оба случая одновременно в одном приложении.

Alex Castle определил новый уровень чанкинга (создания отдельных JavaScript-файлов), который позволяет более оптимально разделять общий код, особенно при большом количестве страниц.

Как и в случае с поддержкой module/nomodule, улучшенное разделение бандлов тестируется в production на нескольких крупных приложениях Next.js для сбора реальных данных. Результаты этих тестов и подробности о повышении производительности будут опубликованы в отдельном блоге.

Сообщество

Мы рады предстоящим изменениям, которые улучшат производительность всех приложений Next.js.

Кроме того, сообщество Next.js продолжает расти:

  • Более 800 контрибьюторов внесли хотя бы один коммит.
  • На GitHub проект получил более 41,350 звёзд.
  • В директории примеров представлено более 210 примеров.

Сообщество Next.js теперь насчитывает более 11,250 участников. Присоединяйтесь!

Мы благодарны нашему сообществу и всем внешним отзывам и вкладам, которые помогли сформировать этот релиз.