Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Введение

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

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

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

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

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

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

Основные черты

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

• Горячая перезагрузка кода: Next.js перезагружает страницу, когда обнаруживает какие-либо изменения, сохраненные на диске.
• Автоматическая маршрутизация: любой URL-адрес отображается в файловой системе (к файлам, размещенным в pages папка), и вам не нужна конфигурация (у вас, конечно, есть параметры настройки).
• Компоненты одного файла: с помощью styled-jsx, полностью интегрированного, созданного той же командой, можно легко добавлять стили внутри компонента.
• Визуализация сервера: перед отправкой HTML клиенту можно (необязательно) отобразить компоненты React на стороне сервера.
• Совместимость экосистем: Next.js хорошо сочетается с остальными экосистемами JavaScript, Node и React.
• Автоматическое разделение кода: страницы отображаются только с библиотеками и JavaScript, которые им нужны, не более.
• Предварительная выборка: Link компонент, используемый для связывания разных страниц, поддерживает a prefetch prop, который автоматически загружает ресурсы страницы (включая код, отсутствующий из-за разбиения кода) в фоновом режиме.
• Динамические компоненты: можно динамически импортировать модули 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 использует декларативную структуру страниц, основанную на структуре файловой системы.

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

Откройте источник страницы, View -> Developer -> View Источник из Chrome.

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

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

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

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

export default () => (  <div>    <p>      <a href=" us!</a>    </p>  </div>)

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

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

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

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

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

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

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

import Link from 'next/link'

export default () => (  <div>    <p>Hello World!</p>    <Link href="      <a>Contact me!</a>    </Link>  </div>)

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

Это навигация на стороне работающего клиента с полной поддержкой для 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>)

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

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

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

Теперь, если нажать одну публикацию, ее заголовок будет отображен в a h1 тег:

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

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, предоставленным той же командой разработчиков. Но вы можете использовать любую библиотеку, например Styled Components.

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

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

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

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

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

В начале этого учебника вы создали a 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 под названием Теперь.

Конечно, они интегрируют оба своих продукта, чтобы вы могли беспрепятственно развертывать программы 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.

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com