Мы рады представить готовую к продакшену версию Next.js 8.0.4:
- Улучшения производительности сборки
- Детерминированные сборки
- Уменьшенный клиентский рантайм
- Уменьшенные серверные функции
- Метатег viewport по умолчанию
- Улучшения обучающего руководства
Как всегда, мы постарались обеспечить полную обратную совместимость всех этих улучшений. Для большинства приложений Next.js достаточно выполнить:
npm i next@latest react@latest react-dom@latestПроизводительность сборки
Сборки Next.js теперь более детерминированы, что означает, что при неизменном коде результат сборки будет одинаковым каждый раз.
Это позволяет кешировать больше этапов процесса сборки, что приводит к ускорению повторных сборок продакшен-кода после первой сборки.
Наши измерения показали, что значительная часть времени сборки тратится на минификацию JavaScript. Благодаря детерминированности сборки вероятность того, что минифицированный файл уже находится в кеше, значительно увеличивается.
Пользователи, развертывающие на Vercel, автоматически получат преимущества этих улучшений кеширования.
Мы упростили серверный манифест next/dynamic, включив в него только асинхронно загружаемые модули. Этот упрощенный манифест быстрее вычисляется и генерирует меньше JavaScript.
Пользователи CircleCI должны заметить ускорение времени сборки. Ранее рабочие процессы были перегружены из-за того, что среда CircleCI не точно отражала количество доступных CPU. Теперь Next.js определяет CircleCI и устанавливает оптимальное количество CPU на основе доступных ресурсов.
Уменьшенный размер рантайма
Next.js теперь генерирует на 5.58KB меньше клиентского JavaScript и имеет меньший размер HTTP-пакета по сравнению с предыдущей версией.
withRouter больше не зависит от hoist-non-react-statics, что уменьшает размер бандла на 3KB. withRouter по-прежнему поднимает getInitialProps, но не другие статические свойства.
Пресет next/babel был оптимизирован для генерации более компактного и быстрого JavaScript.
Заголовок X-Powered-By был удален, что уменьшило размер HTTP-пакета. Мы провели опрос сообщества и выяснили, что этот заголовок часто отключают в продакшене, поэтому решили убрать его. Это также означает, что параметр poweredByHeader можно удалить из вашего next.config.js, если он был включен в проекте.
Мы провели множество оптимизаций в дереве зависимостей Next.js и кодовой базе в целом, что позволило уменьшить размер каждой серверной функции на 44KB (5.44KB в gzip).
Размер серверных функций напрямую влияет на скорость их запуска - меньшие функции запускаются быстрее.
| 8.0 | 8.0.4 | разница | |
|---|---|---|---|
| Размер серверной страницы | 259 KB | 215 KB | 17% меньше |
| Размер серверной страницы (gzip) | 62.3 KB | 56.8 KB | 9% меньше |
После выхода Next.js 8 мы получили сообщения от небольшого числа пользователей о проблемах с импортом React-компонентов вне Next.js, например, в тестовом окружении. Это было вызвано перезаписью импортов из next в правильные файлы внутри кодовой базы Next.js, однако эта оптимизация применялась для всех пользователей пресета next/babel. Оптимизация была перенесена непосредственно в процесс сборки Next.js, поэтому теперь она не конфликтует с настройками Babel пользователей.
Метатег viewport по умолчанию
Одна из целей Next.js - предоставлять наилучшие настройки по умолчанию для веб-приложений. В рамках этой цели мы упростили работу с CSS-медиазапросами в Next.js.
По умолчанию браузеры не обрабатывают CSS-запросы @media и масштабирование так, как можно было бы ожидать, что может привести к неожиданным несоответствиям при написании CSS-запросов @media.
Почти все пользователи Next.js добавляли метатег viewport в свое приложение, чтобы решить эти проблемы.
Начиная с версии 8.0.4, в большинстве случаев этот тег больше не требуется. Если тег viewport не установлен приложением, будет применен тег по умолчанию:
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>Тег viewport можно переопределить с помощью next/head:
import Head from 'next/head';
function HomePage() {
return (
<>
<Head>
<meta
name="viewport"
content="width=device-width,minimum-scale=0.5,initial-scale=1"
/>
</Head>
</>
);
}
export default HomePage;Благодарим Jason Miller за сотрудничество и реализацию этого изменения.
Новый плагин @next/mdx
MDX позволяет писать JSX внутри Markdown-документов. Вы можете использовать обычный синтаксис Markdown для написания контента и импортировать React-компоненты для добавления интерактивности и динамического содержимого.
Плагин, обеспечивающий поддержку MDX в Next.js, @zeit/next-mdx, был перенесен в репозиторий Next.js на GitHub и теперь доступен как @next/mdx.
Установка:
npm i @next/mdx @mdx-js/loaderЧтобы подключить его к вашему приложению Next.js, создайте файл next.config.js и добавьте:
const withMDX = require('@next/mdx')();
module.exports = withMDX();Со временем больше плагинов Next.js будут перенесены в основной репозиторий, чтобы они выпускались вместе с ядром Next.js и тестировались в рамках тестового набора Next.js. Это гарантирует, что горячая перезагрузка модулей, продакшен-сборка и другие функции будут корректно работать с плагинами.
Улучшения обучающего руководства
Next.js Learn - это пошаговое руководство по изучению Next.js, включающее тесты и примеры.
Сайт недавно был переработан с использованием MDX, что значительно упрощает внесение вклада. Мы приветствуем всех желающих поучаствовать в развитии сайта обучения!
Сайт также был обновлен для использования серверной цели Next.js, представленной в Next.js 8, что обеспечивает масштабируемость и высокую скорость работы для пользователей по всему миру.
Мы получили много отзывов от сообщества по улучшению контента и в последние недели работали над их реализацией. Next.js Learn теперь содержит обновленные примеры и более подробные объяснения в каждом разделе, чтобы сделать инструкции более понятными!
Сайт Next.js Learn
Вклад сообщества
Мы очень рады видеть постоянный рост популярности Next.js.
- У нас уже более 660 контрибьюторов.
- На GitHub проект получил более 36,150 звезд.
- Было отправлено более 2,950 pull request'ов с момента первого релиза.
Мы благодарим всех, кто внес вклад в этот релиз Next.js. Будь то работа над ядром или расширение и улучшение нашей постоянно растущей коллекции примеров, мы ценим любой вклад.
Если вы хотите начать вносить вклад в Next.js, задачи с метками good first issue или help wanted - хорошая отправная точка.
Сообщество
Сообщество Next.js выросло до более 6,000 участников.
Обсуждения на GitHub - это место, где можно обсудить Next.js, получить совет по решению проблем и помочь другим участникам сообщества своими знаниями о Next.js.