Next.js для начинающих, с базовыми знаниями React

Оригинал статьи

В этой статье будут описаны возможности и приемы Next.js

Next.js — это JavaScript фреймворк, созданный Zeit. Он позволяет создавать серверную визуализацию и статические веб-приложения с помощью React. Это отличный инструмент для создания сайтов. Next.js имеет много замечательных функций и преимуществ, которые не оставят вас равнодушным и вы обязательно выберите его для создания следующего веб-приложения.

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

В этой статьей мы рассмотрим крутые фичули, которые есть в Next.js и напишем ваше первое приложение 🙂

Мы предполагаем, что у вас есть начальные знания Reactа и JavaScript

Вот некоторые сайты, созданные с Next.js:

• Syntaxt.fm
• npmjs
• material-ui.io
• expo.io
• codemenitor.io

Начало работы с 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

npm i next --save

Затем мы должны установить React, потому что Next.js использует React.

• используя Yarn

yarn add react react-dom

• используя npm

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. Вы можете узнать больше о других функциях в официальной документации.