Руководство по Next.js с примерами

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

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

Вот что мы обсудим сегодня:

  • Что такое Next.js?
  • Пример Next.js
  • Начните с Next.js
  • Проекты для сборки с Next.js

Что такое Next.js?

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

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

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

<head> тег. Next.js также позволяет редактировать тег <head> сайта, чего нельзя сделать в React. Тег <head> является основной частью метаданных веб-страницы и способствует повышению SEO-рейтинга сайта.

В целом Next.js считается более полнофункциональной версией React, которая поддерживает интуитивность, которой известна React Framework.

Зачем использовать Next.js?

Основным преимуществом Next.js является встроенная поддержка SSR для повышения производительности и SEO.
Рендеринг на стороне сервера работает путем изменения потока запросов приложения React таким образом, что все компоненты, кроме клиент отправляет свою информацию на сервер.

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

Плюсы:

  • Приложения Next.js загружаются значительно быстрее, чем приложения React, благодаря встроенному рендерингу на стороне сервера.
  • Поддерживает функции экспорта статических сайтов.
  • Быстро изучить для всех, у кого есть предыдущий опыт работы с React.
  • Автоматическое разделение кода для страниц.
  • Легко создавать внутренние API-интерфейсы с помощью встроенных маршрутов API и создавать конечные точки API.
  • Встроенная поддержка маршрутизации страниц, CSS, JSX и TypeScript.
  • Быстрое добавление плагинов для настройки Next.js в соответствии с потребностями вашей страницы.
  • Поддерживает такие преимущества React, как интуитивно понятное создание на основе компонентов, интерфейсная система состояний и высокая популярность.

Против:

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

Однако предпочтения Next.js вполне подходят для большинства проектов.

Интересный факт: компания Educative недавно перешла на Next.js поверх React. Если вы последние несколько месяцев использовали Educative, значит, вы уже пользовались некоторыми преимуществами Next.js!

Когда использовать Next.js

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

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

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

Next.js Пример

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

Файл index.js, представляющий отдельную страницу в этом проекте, выглядит следующим образом:

import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>
        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>
          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>
          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>
          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>
      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  )
}

Файл index является ядром этого приложения, поскольку он содержит только эту единственную страницу. Реальные веб-сайты будут содержать несколько страниц в папке pages, каждая из которых представляет отдельную веб-страницу.

Начните с Next.js

Теперь давайте начнем с практического кода Next.js. Мы рассмотрим 5 основных концепций, отображаемых в приложении по умолчанию, которые вам понадобятся для создания собственного проекта Next.js.

Требования и окружающая среда

Прежде чем мы начнем, давайте настроим все, что вам нужно. Перед загрузкой Next.js. вам потребуются Node.js, npm и npx.

Вы можете установить Node.js на их официальном сайте. Чтобы убедиться, что он правильно загружен, введите node -v в командную строку. Обычно npm и npx входят в состав вашей установки Node.js.

Чтобы убедиться, что они установлены правильно, введите npm -v и npx -v в командную строку. Каждый вернет свою версию соответственно.

Если все три инструмента установлены правильно, вы можете установить Next.js с помощью Node.
Введите npm install next react react-dom в командную строку.

После успешной установки вы получите следующее сообщение с вашими текущими версиями Next и React:

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Создать приложение Next.js

Вы можете создать новое приложение Next.js с помощью команды create-next-app или вручную.
Использовать create-next-app проще, поскольку все, что вам нужно сделать, это ввести npm create-next-app <app-name> в командную строку.

Кроме того, вы можете открыть свой package.json файл и ввести следующие сценарии:

"scripts": {
  "dev": "next dev",
  "start": "next start",
  "build": "next build"
}

Это позволяет запускать новое приложение в разных режимах:

  • dev запускает Next.js в режиме разработки.
  • start запускает Next.js в рабочем режиме.
  • build создает ваше приложение Next.js для производства. Независимо от того, какой метод вы выберете, он сгенерирует базовый шаблон приложения Next.js, который мы видели ранее.

Если вы запустите это приложение, используя next dev, вы увидите страницу Next.js по умолчанию на http://localhost:3000.

Структура папок Next.js

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

Каждый проект Next.js начинается с трех папок: pages, public и styles.

Вот пример того, что вы найдете в новом проекте Next.js:

// other files and folders, .gitignore, package.json, next.config.js...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Страницы

Папка страниц содержит файлы ваших страниц. Каждый файл страницы является компонентом React с уникальным маршрутом, автоматически созданным из имени файла. Например, страница Next.js hello.js будет находиться по адресу pages/hello.js.

Некоторые страницы, такие как _app.js выше, включают в свое имя префикс подчеркивания, чтобы пометить их как пользовательские компоненты. Эти компоненты используются Next.js для работы с другими компонентами.

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

Общедоступно

Эта папка предназначена для обслуживания статических файлов, то есть эти файлы не изменяются и на них можно только ссылаться. Эта папка часто содержит изображения или значки, которые использует сайт, а также внутреннюю информацию, такую ​​как проверки сайта Google.

В нашей папке public у нас есть favicon.ico, который представляет собой небольшой значок для использования на вкладках браузера, и vercel.svg, который отображает значок компании-разработчика платформы.

Vercel и Netlify - самые популярные хостинговые и бессерверные сервисы для Next.js

Стили

Эта папка содержит наши таблицы стилей CSS, которые определяют внешний вид всех наших элементов страницы. Файл globals.css устанавливает общий стандарт, который будут использовать все страницы проекта.

Вы также можете добавить стиль для конкретного компонента, используя файлы модулей, имена которых имеют суффикс module, <componentName>.module.css.

Маршрутизация / навигация в вашем приложении

Навигация - это способы, которыми ваши пользователи могут перемещаться по вашему веб-сайту Next.js. Маршруты и ссылки - это два основных метода, которые вы можете использовать для определения навигации по сайту.

Маршруты в Next.js доступны благодаря встроенным определениям маршрутов каждого компонента. Чтобы оптимизировать маршрутизацию приложения, важно понимать индексный, вложенный и динамический маршруты.

Индекс

Индексные файлы, такие как index.js, направляются в начальную точку вашего приложения /, а не /index. Вы можете использовать это в своих интересах, создав несколько index файлов, которые выступают в качестве целевой страницы или начальной точки для различных путей навигации на вашем сайте.

- pages
  - index.js # found at `/`
  - users
    - index.js # found at `/users`
    - account.js # `/users/account`

Например, страница index.js под просто pages - это домашняя страница сайта, на которую можно попасть, если не введен дополнительный маршрут. Второй index.js под users - это целевая страница для пути users, для которого нужно ввести <siteName>/users.

Вложенный

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

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

Мы также можем включать параметры в наши маршруты, чтобы разрешить переменное поведение. Динамические страницы обозначаются квадратными скобками. Эта функция, по сути, позволяет нам передавать информацию на страницу, как если бы мы выполняли функцию.

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

# ...
  - users
    - index.js
    - [account.js] # `/users/[accountName]`

При такой настройке пользователи могут ввести имя своей учетной записи в URL-адрес и сразу перейти на страницу с информацией об учетной записи, а не начинать с users. Другими словами, я мог ввести имя своей учетной записи /users/educative, чтобы перейти на динамическую страницу, которая заполняется информацией, относящейся к введенному имени учетной записи.

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

if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }

Связывание

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

Компонент Link принимает аргумент href, заполненный маршрутом файла компонента назначения. Это создаст ссылку между текущей страницей и страницей, найденной на введенном маршруте. Например, если вы добавите <Link href= "/users/"> к hello.js, вы создадите ссылку с hello.js на users целевую страницу.

import Link from 'next/link'
import Head from 'next/head'
function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/users">> <a>Users</a></Link>
         <br/>
         <img src="/logo.png" alt="EducativeLogo" />
      </>        
   )
}
export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}
export default HomePage

Next.js Получение данных

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

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

  • SSR: лучше для интерактивных или быстро меняющихся страниц, которые не работают со статической генерацией.
  • SG: лучше для текстовых страниц или страниц, которые не меняются, потому что статическая визуализация всегда будет соответствовать потребностям пользователя.

Вы можете использовать тот или иной метод выборки или реализовать гибридную систему.
Next.js имеет 3 функции асинхронной выборки данных, которые действуют как централизованные альтернативы традиционному методу React. Эти функции:

getStaticProps: используется с SG для извлечения содержимого страницы из внешних данных.

export async function getStaticProps() {
  // This is a real endpoint
  const res = await fetch('https://sampleapis.com/fakebank/api/Accounts');
  const accounts = await res.json();
  return {
    props: {
      accounts: accounts.slice(0, 10),
    },
  };
}

getStaticPaths: используется с SG для извлечения путей страниц из внешних данных.

export async function getStaticPaths() {
  // Fetch the list of states
  const res = await fetch("https://sampleapis.com/the-states/api/the-states");
  const states = await res.json();
  // Create a path from their ids: `/states/1`, `/states/2` ...
  const paths = states.map((state) => `/states/${state.id}`);
  // Return paths, fallback is necessary, false means unrecognized paths will
  // render a 404 page
  return { paths, fallback: false };
}

getServerSideProps - используется с SSR для извлечения предварительно обработанных страниц во время сборки.

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}
export default HomePage

Проекты для сборки с Next.js

Теперь, когда вы разобрались с основами Next.js, пора заняться своими собственными проектами. Вот несколько идей для начинающих проектов, с которых можно начать:

  • Чтобы попрактиковаться в работе с внешними данными: приложение для поиска Giphy, которое извлекает результаты из внешней базы данных.
  • Для практики статической генерации: национальный информационный сайт, на котором указаны флаг, население и географический размер каждой страны.
  • Чтобы попрактиковаться в навигации: веб-страница социальной сети, похожая на Instagram, на которой отображаются фотографии пользователя на странице аккаунта и лайки / комментарии к каждому отдельному изображению.

Удачного обучения!