Откройте для себя Next.js и легко создавайте серверные приложения React

Заинтересованы в изучении JavaScript? Получите мой Справочник по JavaScript

Вступление

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

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

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

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

Next.js - это один из фреймворков React, который позволяет нам делать все это очень просто, но не ограничивается этим. Его создатели рекламируют его как набор инструментов с одной командой без настройки для приложений React.

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

Основные особенности

Вот неполный список основных функций Next.js:

Перезагрузка горячего кода: Next.js перезагружает страницу при обнаружении любых изменений, сохраненных на диске.
Автоматическая маршрутизация: любой URL-адрес сопоставляется с файловой системой (с файлами, помещенными в папку pages), и вам не нужна никакая конфигурация (конечно, у вас есть параметры настройки).
Однофайловые компоненты: используя styled-jsx, полностью интегрированный, созданный той же командой, легко добавлять стили в компонент.
Серверный рендеринг: вы можете (необязательно) отображать компоненты React на стороне сервера перед отправкой HTML клиенту.
Совместимость экосистемы: Next.js хорошо работает с остальной частью экосистемы JavaScript, Node и React.
Автоматическое разделение кода: страницы отображаются с использованием только необходимых библиотек и JavaScript, не более того.
Предварительная выборка: компонент Link, используемый для связывания различных страниц, поддерживает свойство prefetch, которое автоматически выполняет предварительную выборку ресурсов страницы (включая код, отсутствующий из-за разделения кода) в фоновом режиме.
Динамические компоненты: вы можете динамически импортировать модули JavaScript и компоненты React здесь.
Статический экспорт: с помощью команды next export Next.js позволяет экспортировать полностью статический сайт из вашего приложения.

Установка

Next.js поддерживает все основные платформы: Linux, macOS, Windows.

Проект Next.js легко запускается с помощью npm:

npm install --save next react react-dom

или Пряжа:

yarn add next react react-dom

Начиная

Создайте package.json файл с таким содержанием:

{
  "scripts": {
    "dev": "next"
  }
}

Если вы запустите эту команду сейчас:

npm run dev

сценарий выдаст ошибку с жалобой на то, что не удалось найти папку pages. Это единственное, что требуется для запуска Next.js.

Создайте пустую папку pages и снова запустите команду. Затем Next.js запустит сервер на localhost:3000.

Если вы перейдете по этому URL-адресу сейчас, вас встретит удобная страница 404 с красивым чистым дизайном.

Next.js обрабатывает и другие типы ошибок, например, ошибки 500.

Создать страницу

В папке pages создайте index.js файл с простым функциональным компонентом React:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

Если вы посетите localhost:3000, этот компонент будет отрисован автоматически.

Почему это так просто?

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

Проще говоря, страницы находятся внутри папки pages, а URL-адрес страницы определяется именем файла страницы. Файловая система - это API страниц.

Откройте исходный код страницы View -> Developer -> View Source в Chrome.

Как видите, HTML, сгенерированный компонентом, отправляется прямо в исходный код страницы. Он не отображается на стороне клиента, а отображается на сервере.

Команда Next.js хотела создать среду разработки для страниц, отображаемых на сервере, аналогичную той, которую вы получаете при создании базового проекта PHP (где вы просто отбрасываете файлы PHP и вызываете их, а они отображаются как страницы). Внутри, конечно, все совсем по-другому, но очевидная простота использования налицо.

Добавить вторую страницу

Давайте создадим еще одну страницу в pages/contact.js

export default () => (
  <div>
    <p>
      <a href="[email protected]">Contact us!</a>
    </p>
  </div>
)

Если вы укажете в браузере localhost:3000/contact, эта страница будет отображена. Как видите, эта страница отрисовывается на сервере с задержкой.

Горячая перезагрузка

Обратите внимание на то, что вам не нужно было перезапускать npm процесс, чтобы загрузить вторую страницу. Next.js делает это за вас под капотом.

Клиентский рендеринг

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

Next.js предоставляет Link компонент, который вы можете использовать для создания ссылок. Попробуйте связать две указанные выше страницы.

Измените index.js на этот код:

import Link from 'next/link'
export default () => (
  <div>
    <p>Hello World!</p>
    <Link href="/contact">
      <a>Contact me!</a>
    </Link>
  </div>
)

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

Это клиентская навигация, работающая правильно, с полной поддержкой History API. Это означает, что пользовательская кнопка "Назад" не сломается.

Если вы сейчас cmd-click ссылку, та же самая страница контактов откроется в новой вкладке, теперь обработанной сервером.

Динамические страницы

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

Динамическая страница - это страница, которая не имеет фиксированного содержимого, но вместо этого отображает некоторые данные на основе некоторых параметров.

Измените index.js на:

import Link from 'next/link'
const Post = (props) => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)
export default () => (
  <div>
    <h2>My blog</h2>
    <ul>
      <li>
        <Post title="Yet another post" />
        <Post title="Second post" />
        <Post title="Hello, world!" />
      </li>
    </ul>
  </div>
)

Это создаст серию сообщений и заполнит параметр запроса заголовка заголовком сообщения:

Теперь создайте файл post.js в папке pages и добавьте:

export default (props) => (
  <h1>{props.url.query.title}</h1>
)

Теперь щелчок по отдельному сообщению отобразит заголовок сообщения в теге h1:

Вы можете использовать чистые URL без параметров запроса. Компонент Next.js Link помогает нам, принимая атрибут as, который вы можете использовать для передачи slug:

import Link from 'next/link'
const Post = (props) => (
  <li>
    <Link as={`/${props.slug}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)
export default () => (
  <div>
    <h2>My blog</h2>
    <ul>
      <li>
        <Post slug="yet-another-post" title="Yet another post" />
        <Post slug="second-post" title="Second post" />
        <Post slug="hello-world" title="Hello, world!" />
      </li>
    </ul>
  </div>
)

CSS-в-JS

Next.js по умолчанию поддерживает styled-jsx, решение CSS-in-JS, предоставленное той же командой разработчиков. Но вы можете использовать любую библиотеку, какую захотите, например Стилизованные компоненты.

Экспорт статического сайта

Приложение Next.js можно легко экспортировать как статический сайт. Затем его можно развернуть на одном из сверхбыстрых хостов статических сайтов, таких как Netlify или Firebase Hosting, без необходимости настраивать среду узла.

Этот процесс требует, чтобы вы объявили URL-адреса, из которых состоит сайт, но это простой процесс.

Развертывание

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

В начале этого руководства вы создали package.json файл с таким содержимым:

{
  "scripts": {
    "dev": "next"
  }
}

это был способ запустить сервер разработки с использованием npm run dev.

Теперь просто добавьте вместо этого в package.json следующий контент:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

и подготовьте свое приложение, запустив npm run build и npm run start.

Теперь

Компания Next.js предоставляет отличный хостинг для приложений Node.js под названием Now.

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

За кулисами Now настраивает сервер для вас, и вам не нужно ни о чем беспокоиться - просто дождитесь, пока URL вашего приложения будет готов.

Зоны

Вы можете настроить несколько экземпляров Next.js для прослушивания разных URL-адресов. Однако для внешнего пользователя приложение будет выглядеть так, как будто оно работает на одном сервере: https://github.com/zeit/next.js/#multi-zones

Плагины

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

Подробнее на Next.js

Я не могу описать все особенности этого замечательного фреймворка, и основное место, где можно узнать больше о Next.js, - это readme проекта на GitHub.