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

Next.js 6.1

В Next.js 6.1 улучшена надежность и стабильность разработки

Сегодня мы с гордостью представляем готовую к production-использованию версию Next.js 6.1, которая включает:

  • Повышенную надежность горячей перезагрузки
  • Улучшения кодовой базы
  • Next.js codemods

В дополнение к релизу Next.js 6.1, мы рады сообщить, что nextjs.org теперь открыт для сообщества

Улучшенная надежность горячей перезагрузки

В версиях до Next.js 6.1 Next.js использовал react-hot-loader от имени пользователя. Эта библиотека сохраняет состояние React между горячими перезагрузками.

При этом react-hot-loader добавляет несколько нестандартных поведений в React, например, игнорирует shouldComponentUpdate, а тип элемента становится прокси-компонентом вместо реального React-компонента.

Чтобы Next.js максимально соответствовал стандартному React, мы удалили react-hot-loader из зависимостей. Это гарантирует, что режимы разработки и production будут вести себя более схоже. Обратите внимание, что функция горячей перезагрузки в Next.js не была удалена - она всегда обрабатывалась внутри Next.js.

Горячая перезагрузка для TypeScript и других расширений

По умолчанию Next.js автоматически ищет файлы .js или .jsx в директории pages для определения маршрутов.

С появлением универсального webpack в Next.js 5 появилась возможность иметь страницы верхнего уровня, компилируемые в js. Хороший пример - TypeScript, который использует .ts и .tsx.

pageExtensions - это ключ конфигурации в next.config.js, позволяющий плагинам Next.js определять расширения, которые должны считаться страницами. Например, @zeit/next-typescript определяет .ts и .tsx, а @zeit/next-mdx документирует, как использовать страницы .mdx верхнего уровня.

Ранее при реализации pageExtensions плагины Next.js должны были реализовывать hot-self-accept-loader, используемый для горячей перезагрузки. Теперь это больше не требуется - при добавлении расширения в pageExtensions hot-self-accept-loader применяется автоматически.

Улучшения кодовой базы

В последнее время мы закладывали основу для будущих функций, что потребовало некоторых внутренних изменений, которые в долгосрочной перспективе улучшат качество кода.

Одно из таких изменений - перемещение директории server/build на верхний уровень в build. Это упрощает поиск конфигураций webpack и babel для новых участников.

Мы также сосредоточились на добавлении типов Flow по всей кодовой базе.

Более заметное для пользователей изменение - переименование .next/dist в .next/server. Директория .next содержит результаты сборки. Например, при запуске next build результат будет сохранен в .next.

Файлы предварительного рендеринга теперь находятся в директории server

Повторяющиеся константы были перемещены в общий файл: constants.js

Next.js codemods

Когда вышел Next.js 6.0, магически внедряемое свойство url в компонентах страниц было объявлено устаревшим. Причина отказа от url - стремление сделать поведение более предсказуемым и явным. Магическое свойство url, появляющееся из ниоткуда, не способствует этой цели.

Рекомендуемый способ получить те же свойства, что были у url - использовать withRouter:

page.js
// старый способ
class Page extends React.Component {
  render() {
    const { url } = this.props;
    return <div>{url.pathname}</div>;
  }
}
export default Page;

Как получали pathname в версиях до Next.js 6 с помощью url

page.js
// новый способ
import { withRouter } from 'next/router';
class Page extends React.Component {
  render() {
    const { router } = this.props;
    return <div>{router.pathname}</div>;
  }
}
export default withRouter(Page);

Как следует получать pathname в версиях после Next.js 6 с помощью router, внедряемого withRouter

Мы стремимся упростить процесс обновления приложений Next.js, поэтому создали простой способ обновления использования url до withRouter.

Результатом этой работы стала библиотека next‑codemod, содержащая codemods для автоматического обновления устаревших функций до их новых версий.

Первый предоставляемый codemod - url-to-withrouter, который автоматически преобразует многие случаи использования url в withRouter.

Terminal
  jscodeshift -t ./url-to-withrouter.js pages/**/*.js

Эта команда преобразует использование url в withRouter.

Подробнее здесь

Участие в развитии Next.js

Сообщество Next.js растет - более 450 участников уже внесли хотя бы один коммит в ядро Next.js или примеры.

Есть много способов внести вклад в Next.js:

  • Присоединиться к сообществу и давать советы на GitHub

  • Добавлять примеры распространенных случаев использования: директория examples

  • Проверять метки good first issue и help wanted на GitHub

    Открыто 30 задач с меткой good first issue, давая новым участникам возможность внести свой вклад.

nextjs.org с открытым исходным кодом

Мы рады сообщить, что nextjs.org теперь открыт для сообщества, что позволяет использовать его как эталонную реализацию Next.js и напрямую сообщать о проблемах/улучшениях в проекте.

Будущее

Мы работаем над несколькими новыми функциями для повышения надежности и производительности. Вот некоторые из них:

Webpack 4

Webpack 4 приносит множество улучшений: лучший code-splitting, меньше конфигурации по умолчанию и, что важнее всего, более быстрое время сборки. В первоначальных тестах на приложении с более чем 200 страницами next build сократился со 100 секунд до 70 в среднем. При повторном запуске (с кешами) next build занимал в среднем 21 секунду.

Serverless Next.js

Мы постепенно вносим изменения, чтобы подготовить перенос next start в отдельный пакет: next-server. Этот пакет будет сильно оптимизирован по размеру установки и времени запуска. Эти оптимизации необходимы для "serverless" сценариев, где новый экземпляр приложения выполняется при каждом запросе или через несколько запросов. Это означает, что "холодный старт" приложения должен быть оптимизирован для максимальной скорости.