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

Next.js 9.4

В Next.js 9.4 представлены React Fast Refresh, инкрементальная статическая регенерация, поддержка новых переменных окружения, встроенный Fetch и многое другое!

Сегодня мы рады представить Next.js 9.4 с новыми возможностями:

Fast Refresh

Fast Refresh — это новый способ горячей перезагрузки, который дает мгновенную обратную связь при редактировании React-компонентов. Теперь он включен по умолчанию во всех проектах на Next.js 9.4 и новее.

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

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

Fast Refresh глубоко интегрирован в React (через React Refresh), позволяя Next.js выполнять точные обновления дерева React-компонентов.

Это означает, что Next.js будет обновлять только код в редактируемом файле и перерисовывать только этот компонент без потери состояния. Это включает стили (inline, CSS-in-JS или CSS/Sass Modules), разметку, обработчики событий и эффекты (через useEffect).

Сессия редактирования с ошибками компиляции и выполнения (с быстрым восстановлением) и правками, сохраняющими состояние.

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

  • Точное местоположение ошибок с указанием исходной строки и столбца кода до компиляции
  • Контекстно-релевантные фрагменты исходного кода с возможностью открытия в редакторе по клику
  • Возобновление сессии разработки после исправления синтаксической ошибки без потери состояния приложения
  • Автоматическое скрытие необработанных ошибок выполнения после их исправления

Мы благодарим Дэна Абрамова за неоценимый вклад и помощь в реализации этой функции.

Инкрементальная статическая регенерация (бета)

Next.js представил методы статической генерации сайтов в 9.3 с четкой целью: мы должны получить преимущества статики (всегда быстро, всегда онлайн, глобально распределено), но с отличной поддержкой динамических данных, за которые известен Next.js.

Чтобы получить лучшее из обоих миров, Next.js поддерживает инкрементальную статическую генерацию, обновляя статический контент после сборки сайта. Например, в 9.3 мы представили опцию fallback: true в getStaticPaths, позволяющую добавлять новые страницы во время выполнения.

Недавно мы создали пример, демонстрирующий, как Next.js может статически предварительно рендерить бесконечное количество страниц таким образом.

Сегодня мы также представляем инкрементальную статическую регенерацию (бета) — механизм обновления существующих страниц путем их фонового перерендеринга при поступлении трафика. Вдохновленный stale-while-revalidate, он гарантирует бесперебойную работу трафика, всегда статически, а новая страница отправляется только после завершения генерации.

pages/blog/[slug].js
export async function getStaticProps() {
  return {
    props: await getDataFromCMS(),
    // мы попытаемся регенерировать страницу:
    // - при поступлении запроса
    // - не чаще раза в секунду
    unstable_revalidate: 1,
  };
}

В отличие от SSR, инкрементальная статическая регенерация сохраняет преимущества статики:

  • Нет скачков задержки. Страницы загружаются стабильно быстро.
  • Страницы никогда не отключаются. Если фоновая регенерация не удалась, старая страница остается неизменной.
  • Низкая нагрузка на базу данных и бэкенд. Страницы пересчитываются не более одного раза одновременно.

Обе инкрементальные функции (добавление страниц и их ленивое обновление), а также режим предпросмотра, уже полностью поддерживаются как next start, так и платформой Vercel edge из коробки.

Далее мы работаем над дополнительным RFC для решения двух возможностей инкрементальной статической генерации:

  • Регенерация и инвалидация нескольких страниц одновременно (например, индекса блога и определенного поста)
  • Регенерация по событиям (например, вебхукам CMS) до поступления пользовательского трафика

Примеры для CMS

Вслед за анонсом нового статического генератора сайтов мы хотели поделиться реальными сценариями получения контента из Headless CMS API и его рендеринга как HTML в Next.js.

Мы сотрудничали с создателями лучших CMS в мире: Contentful, DatoCMS, Prismic, Sanity и TakeShape, с другими в процессе.

Эти примеры не только готовы к использованию и на 100% открыты под лицензией MIT, но и включают лучшие практики:

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

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

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

Поддержка новых переменных окружения

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

Сегодня мы объявляем две полностью обратно совместимые функции, которые упростят этот процесс.

Во-первых, теперь можно добавлять префикс NEXT_PUBLIC_ к переменной окружения, чтобы сделать ее доступной в браузере. При использовании такая переменная будет встроена в JavaScript-бандл браузера.

Больше не нужно добавлять next.config.js и ключ env для экспорта этих переменных.

pages/index.js
// Переменная окружения будет доступна в браузере
console.log('Версия моего приложения', process.env.NEXT_PUBLIC_VERSION);
 
export default function HomePage() {
  return <h1>Hello World</h1>;
}

Второе изменение — Next.js теперь по умолчанию поддерживает загрузку .env, что упрощает определение переменных окружения для разработки и продакшена.

Подробнее о загрузке .env можно прочитать в документации по переменным окружения.

Эти новые функции упростят использование переменных окружения по следующим правилам:

  • По умолчанию переменные окружения доступны только в среде Node.js
  • Переменные с префиксом NEXT_PUBLIC_ доступны в браузере

Улучшенная поддержка встроенного Fetch

В Next.js 9.1.7 мы анонсировали полифил для API fetch() в браузере. Сегодня этот полифил расширен и на среду Node.js.

На практике больше не нужно использовать серверные полифилы для fetch (например isomorphic-unfetch или node-fetch), так как Next.js автоматически предоставляет fetch() во всех средах.

Например, при использовании getStaticProps, который выполняется Next.js во время сборки:

pages/blog.js
export async function getStaticProps() {
  // больше не нужно импортировать fetch из isomorphic-unfetch
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}
 
function Blog({ posts }) {
  // Рендеринг постов...
}
 
export default Blog;

Интегрированная отчетность Web Vitals

На прошлой неделе команда Google Chrome представила Core Web Vitals. Core Web Vitals — это ключевые показатели качества для обеспечения отличного UX в вебе, на основе которых строятся знаменитые отчеты Lighthouse.

Отслеживание этих метрик крайне полезно, если вы хотите, чтобы ваш сайт или веб-приложение были максимально быстрыми, что является одной из основных целей Next.js.

Команда Chrome выпустила расширение Core Web Vitals, которое дает визуальную обратную связь о производительности ваших страниц.

При создании продакшн-приложений также важно знать, как ваш сайт работает для посетителей и (потенциальных) клиентов. Возможно, вы захотите отслеживать улучшение или ухудшение этих метрик со временем, чтобы увидеть влияние изменений на аудиторию.

Для упрощения отправки Core Web Vitals в вашу аналитику мы, в сотрудничестве с Google, представили новый метод reportWebVitals, который можно экспортировать из pages/_app.js:

pages/_app.js
// Будет вызываться для каждой метрики, которую нужно отправить.
export function reportWebVitals(metric) {
  // Эти метрики можно отправить в любую аналитическую систему
  console.log(metric);
}
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default MyApp;

Чтобы использовать этот метод с вашей аналитической системой, обратитесь к разделу "Отправка результатов в аналитику". Подробнее о Core Web Vitals можно узнать на web.dev/vitals.

Абсолютные импорты и алиасы

В больших проектах некоторые import могут страдать от спагетти ../../../:

import Button from '../../../../components/button';

В таких случаях вместо относительных импортов можно использовать абсолютные импорты. Если директория components находится в корне, импорты могут выглядеть так:

import Button from 'components/button';

Мы рады сообщить, что Next.js 9.4 делает настройку абсолютных импортов очень простой для проектов на JavaScript и TypeScript. Достаточно добавить конфиг baseUrl в jsconfig.json (JS-проекты) или tsconfig.json (TS-проекты).

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Это позволит использовать абсолютные импорты из . (корневой директории). Это также интегрируется с VSCode и другими редакторами, поддерживая навигацию по коду и другие функции.

Примечание: Если вы ранее изменяли конфигурацию алиасов Webpack для абсолютных импортов, эту конфигурацию теперь можно удалить.

Кроме того, Next.js 9.4 также поддерживает опцию paths, позволяющую создавать пользовательские алиасы модулей. Например, следующее позволяет использовать @/design-system вместо components/design-system:

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

Затем можно использовать алиас так:

// Импортирует 'components/design-system/button'
import Button from '@/design-system/button';

При указании paths необходимо указать baseUrl. Подробнее об опции paths можно узнать в документации TypeScript.

Настраиваемая поддержка Sass

После введения встроенной поддержки Sass в Next.js 9.3 мы получили отзывы, что часть пользователей хочет настраивать компилятор Sass, например, конфигурировать includePaths.

Теперь это возможно с помощью ключа sassOptions в next.config.js:

next.config.js
const path = require('path');
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

Улучшенный вывод логов

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

Запуск next dev до версии 9.4

Запуск next dev в 9.4

Сообщество

Мы рады видеть рост популярности Next.js:

  • Более 1066 независимых контрибьюторов.
  • На GitHub проект получил более 48,000 звезд.

Присоединяйтесь к сообществу Next.js на GitHub Discussions. Discussions — это пространство для общения с другими пользователями Next.js и задавания вопросов.

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

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