
Содержание статьи
Хотите изучить 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
компонент, используемый для связывания разных страниц, поддерживает aprefetch
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