В этой статье будут описаны возможности и приемы Next.js
Next.js — это JavaScript фреймворк, созданный Zeit. Он позволяет создавать серверную визуализацию и статические веб-приложения с помощью React. Это отличный инструмент для создания сайтов. Next.js имеет много замечательных функций и преимуществ, которые не оставят вас равнодушным и вы обязательно выберите его для создания следующего веб-приложения.
Next.js имеет свои конфигурации, для того чтобы начать использовать его, вам нужно запустить npm run dev
и начать сборку приложение.
В этой статьей мы рассмотрим крутые фичули, которые есть в Next.js и напишем ваше первое приложение 🙂
Мы предполагаем, что у вас есть начальные знания Reactа и JavaScriptВот некоторые сайты, созданные с Next.js:
Начало работы с Next.js
У вас должен быть установлен Node.js на вашей машине. Для установки зависимостей требуется npm или Yarn.
Давайте начнем и создадим Next.js проект.
Сначала нужно создать папку и дать ей имя, например
nextjs-app
.
Вы можете легко сделать это командной строкой:

mkdir nextjs-app
После создания папки nextjs-app откройте ее в терминале. Запустите npm init
для создания packet.json
файла.
Далее мы должны установить наши зависимости.
Установка Next.js
- используя Yarn
yarn add next
npm i next --save
Затем мы должны установить React, потому что Next.js использует React.
- используя Yarn
yarn add react react-dom
npm i react react-dom --save
После этого нужно создать две необходимые папки: pages
и static
. Next.js не будет работать без них!!!

mkdir pages static
Вы должны иметь такую структуру после выполнения команд:
nextjs-app
-pages
-static
-package.json
А затем просто запустите npm next dev
и откройте http://localhost:3000/
в вашем браузере.
Но так как у вас еще нет сайта, ничего не появится!
Итак, давайте создадим точку входа index.js
и домашнюю страницу home.js

touch index.js home.js
Вот как выглядит наш home.js
:

И index.js
:

Next.js имеет функцию живой перезагрузки(hot reload). Все, что вам нужно сделать, это просто изменить и сохранить, а Next.js автоматически скомпилирует и перезагрузит приложение.
Примечание: Next.js это инструмент рендеринга на стороне сервера, нам обязательно нужно определить страницу по умолчанию, в нашем случае это будет index.js
.
Вы увидите это изменение в браузере после запуска npm next dev
:

Поздравляю! С помощью нескольких простых шагов, мы создали ваше первое Next.js приложение. Эти инструкции по созданию Next.js приложения описана в официальной документации Next.js.
Создание пользовательских конфигураций для Next.js
Иногда может потребоваться добавить некоторые дополнительные зависимости или пакеты.
Next.js дает вам возможность настроить конфигурацию с помощью next-config.js
файла.
Например, может потребоваться добавить поддержку sass. В этом случае необходимо использовать пакет next-sass и добавить его в next-config.js
файл, как в примере ниже:
Во-первых установим next-sass
:

yarn add @zeit/next-sass
Затем включите его в next-config.js
:

А затем вы можете писать код sass и импортировать его в свой компонент:

Импорт файла sass в наш компонент:

И вот результат:

На этом этапе мы просто рассмотрели установку и настройку. Теперь поговорим об особенностях Next.js!
Особенности
Next.js поставляется с кучей замечательных функций — это серверный рендеринг, роутеры и ленивая загрузка.
Серверный рендеринг
Next.js по умолчанию выполняет рендеринг на стороне сервера. Это делает ваше приложение оптимизированным для поисковых систем. Также вы можете интегрировать любое связующее ПО типа express.js или Hapi.js, и вы можете запустить любую базу данных, например MongoDB или MySQL.
Говоря о поисковой оптимизации, Next.js поставляется с компонентом Head
, который позволяет добавлять и создавать динамические мета-теги. Ваш сайт отлично проиндексируется поисковыми системами. Вот пример компонента Head
:

И вы можете импортировать и использовать Head
компонент на любой другой странице:

Потрясающе!
Примечание: С Next.js вам не нужно импортировать React, потому что Next.js делает это за вас.
Создание статического веб-сайта с помощью Next.js
Помимо серверного рендеринга, вы можете скомпилировать и экспортировать приложение в виде статического html и развернуть его на обычном хостинге. Дополнительно вы можете прочитать об этом в официальное документации — здесь
Роутеры
Это еще одна из замечательных особенностей Next.js. Когда вы используете create-react-app, вам, как правило, нужно устанавливать react-router и задавать пользовательские настройки.
В Next.js роутеры работают из коробки! Никакой дополнительной настройки не требуется. Просто создайте свою страницу в папке pages
и Next.js позаботится обо всех конфигурациях.
Давайте создадим меню, и все станет ясно!
Для перехода между страницами, в Next.js используется метод Link

Давайте создадим страницы blog.js
и contact.js
:
blog.js
:

contact.js
:

Теперь мы можем перемещаться между этими страницами

Ленивая загрузка
Ленивая загрузка делает ваше приложение более быстрым. Иногда загрузка страницы может занять некоторое время. А если загрузка длится слишком долго, пользователи и вовсе могут не дождаться ее окончания и просто уйти
Для этого нужно показать пользователю, что страница загружается. Ленивая загрузка или разделение модулей — помогут вам загружать только необходимый код на страницу и контролировать общую скорость загрузки.
В Next.js уже из коробки есть возможность разделения модулей. Рассмотрим метод dynamic
, для загрузки нашего компонента, как в примере ниже:

Вот и все. Исходный код этих примеров можно найти на GitHub. Вы можете узнать больше о других функциях в официальной документации.
Can you tell us more about this? I’d like to find out some additional information.
bookmarked!!, I love your blog!