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

Next.js 6 и новый сайт Nextjs.org

В Next.js 6 появились статический экспорт без конфигурации, App Component, Babel 7 и другие функции

В этом году ключевое выступление на ZEIT Day началось с демонстрации наших проектов с открытым исходным кодом, включая метрики Next.js. Более 25000 звезд на GitHub и более 10000 сайтов уже используют его — мы потрясены таким ростом и рады видеть все больше проектов, зависящих от Next.js.

Сегодня мы с гордостью представляем готовую к продакшену версию Next.js 6 с такими функциями:

  • Статический экспорт без конфигурации. По умолчанию не требуется next.config.js
  • _app.js — точка расширения для перехода между страницами, обработки ошибок и других возможностей
  • Поддержка Babel 7 и синтаксиса фрагментов <>
  • Расширенные интеграционные тесты с упором на безопасность
  • Аннотации Flow в основном коде

Помимо релиза 6.0, мы представляем новый сайт Next.js — nextjs.org, который включает:

  • Всю документацию Next.js в одном месте. Больше не нужно искать README на GitHub
  • Объединение https://learnnextjs.com с https://nextjs.org/learn
  • Галерею самых впечатляющих сайтов, созданных с помощью Next.js

Статические React-приложения

Next.js фокусируется на идее предварительного рендеринга (pre-rendering) для достижения высокой производительности. Предварительный рендеринг бывает двух видов:

  • Рендеринг на стороне сервера (SSR): когда каждый запрос запускает рендеринг. В результате конечному пользователю не нужно ждать загрузки JS, чтобы начать получать данные
  • Статический рендеринг: когда мы генерируем статические файлы, которые можно обслуживать напрямую без выполнения кода на сервере

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

В Next.js 6 мы автоматически генерируем карту маршрутов на основе содержимого вашей директории pages/. Если вы не используете сложные пользовательские маршруты, вам не нужно вносить изменения в next.config.js. Просто выполните:

next build
next export

Пример можно посмотреть на этом сайте, развернутом статически на Vercel. Исходный код сайта также доступен.

App Component

Next.js предоставляет точку расширения под названием _document.js. Если она определена, вы можете переопределить самый верхний уровень документа вашего приложения, который рендерит элемент <html>.

_document.js позволяет мощно расширять функциональность, но имеет серьезные ограничения. Например, React не может рендерить <html> или <body> напрямую на стороне клиента, поэтому _document.js в основном ограничен фазой начального предварительного рендеринга.

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

Различия между _document.js и _app.js

Рассмотрим некоторые сценарии использования, которые позволяет реализовать _app.js.

Переходы между страницами

Пример переходов между страницами: page-transitions-app-next.vercel.app от Xavier Cazalot (Исходный код)

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

Лучшая интеграция с Apollo и Redux

У нас уже было много примеров интеграции фреймворков для управления данными и состоянием, таких как Apollo и Redux.

С _app.js стало еще проще включать их. Вот несколько примеров:

Лучшая обработка ошибок

React предоставляет метод компонента componentDidCatch, который позволяет перехватывать и обрабатывать исключения, возникающие во вложенных компонентах на стороне клиента.

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

Поэтому _app.js — хорошее место для определения логики componentDidCatch. Вот пример обработки ошибок в действии (исходный код)

Babel 7

Мы обновили Babel до последней версии: 7. С ней появились новые функции и улучшения.

JSX-фрагменты

React 16.2 представил API Fragment, который позволяет выражать список элементов без необходимости оборачивать их в произвольный HTML-элемент, например <div>:

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

Написание этого может быть утомительным. В Next.js 6 вы можете использовать новый синтаксис JSX-фрагментов для упрощения их создания:

render() {
  return <>
    <A />,
    <B />
  </>
}

Вложенные .babelrc

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

src/
  .babelrc      # Общий .babelrc
  components/
    i18n/
      .babelrc  # Этот .babelrc применяется только к этой директории

Поддержка TypeScript первого класса

Когда мы анонсировали Universal webpack, мы отметили, что можно использовать TypeScript через ts-loader, так как теперь мы запускаем webpack и на сервере, и на клиенте.

Babel 7 имеет встроенную поддержку TypeScript (ранее Babel поддерживал только Flow).

Чтобы использовать ее, просто установите последнюю версию @zeit/next-typescript или посмотрите этот пример.

Nextjs.org

Мы рады представить новый nextjs.org, созданный основным разработчиком Next.js Jimmy Moon.

Для начала мы показываем ускоренное видео, демонстрирующее создание PWA с серверным рендерингом с нуля за 5 минут:

Вступительное видео на nextjs.org

Вся документация в одном месте

Когда вам нужно быстро что-то найти, просто перейдите на nextjs.org/docs:

Документация всегда отражает последнюю стабильную версию

Пошаговое обучение

Ранее мы рекомендовали новичкам переходить на https://learnnextjs.com для пошагового руководства (с тестами!) по началу работы с Next.js.

Теперь мы интегрировали его прямо в nextjs.org/learn, чтобы сделать обучение еще проще:

Самый простой способ начать изучать Next.js

Вдохновляйтесь

Теперь мы представляем галерею красивых сайтов и приложений, созданных на Next.js. Перейдите на nextjs.org/showcase, чтобы вдохновиться, или добавьте свой проект!

Примеры проектов, созданных с помощью Next.js