Начало работы с Next.js

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

Вступление

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

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

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

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

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

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

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

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

  • Горячая перезагрузка кода: Next.js перезагружает страницу при обнаружении любых изменений, сохраненных на диске.
  • Автоматическая маршрутизация: любой URL-адрес сопоставляется с файловой системой, с файлами, помещенными вpagesпапка, и вам не нужна никакая конфигурация (конечно, у вас есть варианты настройки).
  • Однофайловые компоненты: с помощьюстилизованный-jsx, полностью интегрированный и созданный той же командой, просто добавить стили в компонент.
  • Серверный рендеринг: вы можете (необязательно) отображать компоненты React на стороне сервера перед отправкой HTML клиенту.
  • Совместимость экосистемы: Next.js хорошо сочетается с остальной частью экосистемы JavaScript, Node и React.
  • Автоматическое разделение кода: страницы отображаются только с помощью необходимых им библиотек и JavaScript, не более того.
  • Предварительная загрузка: theLinkкомпонент, используемый для связывания разных страниц, поддерживаетprefetchprop, который автоматически предварительно выбирает ресурсы страницы (включая код, отсутствующий из-за разделения кода) в фоновом режиме.
  • Динамические компоненты: вы можете динамически импортировать модули JavaScript и компоненты React (https://github.com/zeit/next.js#dynamic-import).
  • Статический экспорт: с использованиемnext exportКоманда Next.js позволяет экспортировать полностью статический сайт из вашего приложения.

Установка

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

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

npm install next react react-dom

Начиная

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

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

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

npm run dev

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

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

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

A 404 page returned by Next.js

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='mailto:[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> )

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

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

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

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

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

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

Изменятьindex.jsк

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <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> )

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

The posts list

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

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

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

A single post

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

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <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 по умолчанию поддерживаетстилизованный-jsx, который представляет собой решение CSS-in-JS, предоставленное той же командой разработчиков, но вы можете использовать любую библиотеку, которую предпочитаете, напримерСтилизованные компоненты.

Пример:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

Стили привязаны к компоненту, но вы также можете редактировать глобальные стили, добавляяglobalкstyleэлемент:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

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

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

Процесс требует, чтобы вы объявили 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.

Сейчас же

Zeit теперь называетсяVercel, и это руководство может быть устаревшим

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

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

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

Зоны

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

Плагины

Next.js имеет список плагинов наhttps://github.com/zeit/next-plugins

Стартовый комплект на Glitch

Если вы хотите поэкспериментировать, рекомендую Glitch. Посмотри мойNext.js Стартовый комплект Glitch.

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

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

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: