Что такое Next.js

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

Что такое Next.js

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

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

Ключевые особенности этого фреймворка включают в себя:

• встроенный рендеринг (как статический, так и серверный);
• поддержку TypeScript;
• множество дополнительных инструментов, которые делают разработку более продуктивной.

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

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

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

Для этого используется команда create-next-app:

yarn create next-app app-name
# typescript
yarn create next-app app-name --typescript

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

Настройка проекта

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

yarn add next react react-dom

Далее необходимо обновить файл package.json, добавив в него секцию "scripts" для управления командами вашего приложения:

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

После выполнения этих настроек можно запустить сервер разработки с помощью команды:

yarn dev

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

Основные возможности Next.js

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

Страницы (Pages)

Чтобы обратиться к определенной странице, в адресной строке браузера указывается имя файла без расширения. Например, /about откроет файл pages/about.js. 

Существует также возможность создать динамические маршруты, например: pages/posts/[id].js, где id – это переменная часть адреса.

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

Этот рендеринг бывает двух видов:

• статическим (SSG);
• серверным (SSR). 

Ниже рассмотрим примеры обоих вариантов. 

Статический рендеринг:

export default function About() {
  return <div>О нас</div>
}

Серверный рендеринг:

function Page({ data }) {
  // ...
}

export async function getServerSideProps() {
  const data = await (await fetch('https://example.com/data'))?.json()

  return {
    props: {
      data
    }
  }
}

Здесь объявляется дополнительная функция getServerSideProps, которая получает необходимые данные с удаленного сервера.

Получение данных (Data Fetching)

Один из ключевых моментов работы с Next.js – это эффективное управление данными. Для этой цели фреймворк предоставляет три встроенные функции:

• getStaticProps – для экспорта данных при сборке страницы;
• getStaticPaths – для определения динамических маршрутов;
• getServerSideProps – для получения данных при каждом запросе к странице.

В качестве примера рассмотрим работу с данными на стороне клиента:

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>При загрузке данных возникла ошибка</div>
  if (!data) return <div>Загрузка...</div>

  return <div>Привет, {data.name}!</div>
}

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

Встроенная поддержка CSS

Next.js предоставляет прямую поддержку CSS, благодаря чему можно легко импортировать стили и другую стилистическую информацию.

// pages/_app.js
import './style.css'

// Данный экспорт по умолчанию является обязательным
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

В приведенном примере добавляются глобальные стили, которые будут применяться ко всем компонентам вашего приложения. Если вы хотите добавить стили к отдельному компоненту, можете использовать встроенные стили.

Например, вот встроенный стиль цвета:

export const Hi = ({ name }) => <p style={{ color: 'green' }}>Привет, {name}!</p>

Макеты (Layouts)

Макеты облегчают процесс создания общей структуры ваших страниц, предоставляя шаблоны для повторяющихся частей интерфейса. 

Например, шапка или подвал:

// components/layout.js
import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

После создания макета его можно интегрировать в ваше приложение:

// pages/_app.js
import Layout from '../components/layout'
export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

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

Компонент Image и оптимизация изображений

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

Он содержит в себе несколько встроенных оптимизаций, которые позволяют улучшить показатели Core Web Vitals:

• повысить производительность;
• обеспечить визуальную стабильность;
• ускорить загрузку страницы;
• обеспечить гибкость (масштабируемость) изображений.

В общем случае компонент выводит файлы рисунков с расширением img по команде next/image:

import Image from 'next/image'
import imgSrc from '../public/some-image.png'

export default function Home() {
  return (
    <>
      <h1>Главная страница</h1>
      <Image
        src={imgSrc}
        alt=""
        role="presentation"
      />
    </h1>
  )
}

Оптимизация шрифтов

Next.js облегчает интеграцию внешних шрифтов, предлагая эффективные методы их подключения:

// было
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

// стало
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal...}
</style>

Еще одно преимущество фреймворка заключается в том, что помимо стандартных шрифтов, вы можете также подключать пользовательские варианты.

Компонент Script

Компонент Script в Next.js упрощает интеграцию сторонних скриптов (фрагментов кода). Это позволяет улучшить производительность:

import Script from 'next/script'

<Script id="show-banner" strategy="lazyOnload">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

// или
<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`
  }}
/>

Обслуживание статических файлов

Next.js позволяет легко использовать статические файлы из директории public:

import Image from 'next/image'

export default function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" >
}

Эту директорию можно оптимально использовать для хранения файлов robots.txt, favicon.png, а также файлов, которые нужны для верификации сайта в поисковых системах и другой статики (включая .html).

Обновление в режиме реального времени

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

Для принудительного обновления конкретного компонента, можно ввести процедуру // @refresh reset в любом месте программы.

TypeScript 

Если вы предпочитаете использовать TypeScript в вашем проекте на Nextjs, создание нового приложения с его поддержкой становится очень простым заданием. Для этого достаточно добавить флаг --typescript или его короткую версию --ts:

yarn create next-app --typescript app-name
# или
yarn create next-app --ts app-name

Переменные среды окружения 

Переменные среды – это ключевой инструмент для управления конфиденциальной или настраиваемой информацией в вашем приложении. В Next.js переменные среды, которые должны быть доступны на стороне клиента, следует начинать с префикса NEXT_PUBLIC_:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

После определения переменных они сохраняются в файле .env.local в корневой директории вашего проекта, обеспечивая их безопасное хранение.

Маршрутизация в Next.js

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

Основная навигация

Для создания навигационных ссылок используется компонент Link:

import Link from 'next/link'

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          Главная
        </Link>
      </li>
      <li>
        <Link href="/about">
          О нас
        </Link>
      </li>
      <li>
        <Link href="/blog/first-post">
          Пост номер раз
        </Link>
      </li>
    </ul>
  )
}

В итоге отдельные страницы выстраиваются в связную последовательность.

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

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

import Link from 'next/link'

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/post/abc">
          Ведет на страницу `pages/post/[pid].js`
        </Link>
      </li>
      <li>
        <Link href="/post/abc?foo=bar">
          Также ведет на страницу `pages/post/[pid].js`
        </Link>
      </li>
      <li>
        <Link href="/post/123/456">
          <a>Ведет на страницу `pages/post/[pid]/[cid].js`</a>
        </Link>
      </li>
    </ul>
  )
}

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

Императивная навигация на стороне клиента

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

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Читать подробнее
    </button>
  )
}

Поверхностная маршрутизация (Shallow Routing)

Этот метод позволяет изменять URL без необходимости запускать методы жизненного цикла getServerSideProps, getStaticProps или getInitialProps:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// текущий `URL` имеет значение `/`
export default function Page() {
  const router = useRouter()

  useEffect(() => {
    // выполнить навигацию после первого рендеринга
    router.push('?counter=1', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // значение `counter` изменилось!
  }, [router.query.counter])
}

Можно использовать параметр shallow при вызове router.push для активации поверхностной маршрутизации:

router.push('?counter=1', '/about?counter=1', { shallow: true })

Интерфейс маршрутизации (API Routes)

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

Основы работы с API маршрутами

Посмотрим на пример функции обработки, которая различает типы запросов:

export default function handler(req, res) {
  if (req.method === 'POST') {
    // работаем с POST-запросом
  } else {
    // работаем с другим запросом
  }
}

Здесь req.method позволяет определить тип HTTP-запроса (например, POST или GET), что дает возможность различно обрабатывать запросы на основе их типа. Обновления версий методов обработки интерфейса на удаленном сервере при этом не происходит.

Посредники (Middlewares)

Next.js предоставляет вам доступ к различным объектам запроса (req). Среди них:

• req.cookies – содержит куки, связанные с запросом;
• req.query – содержит строку запроса;
• req.body – содержит основное тело запроса.

Вы также можете настроить поведение парсера тела запроса:

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb'
    }
  }
}

Вспомогательные функции ответа

Объект ответа (res) предоставляет набор методов и свойств, которые помогают формировать ответ сервера. Эти инструменты упрощают процесс создания API маршрутов и позволяют быстро разрабатывать решения на базе JavaScript.

Подготовка проекта к продакшну

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

Кеширование

Кеширование – это метод оптимизации, позволяющий сократить время загрузки и уменьшить нагрузку на сервер за счет сохранения часто используемых ресурсов. Вы можете управлять кешированием, применяя заголовки HTTP:

Cache-Control: public, max-age=31536000, immutable

Если требуется отключить кеширование, например, для разработки или отладки, используйте:

Cache-Control: no-cache, no-store, max-age=0, must-revalidate

Как видим, это весьма удобная функция в больших проектах. И она сама по себе очень простая.

Оптимизация объема JavaScript

Один из ключевых этапов оптимизации – минимизация объема JavaScript-кода. Это не только ускоряет загрузку приложения, но и делает его более отзывчивым. Вместо написания избыточного кода рекомендуется максимально использовать стандартные возможности и библиотеки.

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

Аутентификация

Аутентификация – это ключевой элемент в веб-разработке, который позволяет удостовериться в личности пользователя и предоставить ему соответствующие права доступа.

Паттерны аутентификации

Аутентификацию можно реализовать различными способами, в том числе на стороне клиента или сервера.

Вот пример реализации профиля пользователя, где данные загружаются на стороне клиента:

// pages/profile.js
import useUser from '../lib/useUser'
import Layout from './components/Layout'

export default function Profile() {
  // получаем данные пользователя на стороне клиента
  const { user } = useUser({ redirectTo: '/login' })

  // состояние загрузки, полученное от сервера
  if (!user || user.isLoggedIn === false) {
    return <Layout>Загрузка...</Layout>
  }

  // после выполнения запроса отображаются данные пользователя
  return (
    <Layout>
      <h1>Ваш профиль</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

При серверной аутентификации используется метод getServerSideProps, который позволяет обработать данные перед тем, как они достигнут клиента:

export async function getServerSideProps(context) {
  return {
    props: {} // будут переданы компоненту страницы как пропы
  }
}

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

Провайдеры аутентификации

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

with-passport

with-passport-and-next-connect

Продвинутые инструменты Next.js

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

Динамическая маршрутизация

Позволяет загружать модули динамически в зависимости от потребности. Например, динамическая загрузка библиотеки для поиска при вводе пользователем:

import { useState } from 'react'

const names = ['John', 'Jane', 'Alice', 'Bob', 'Harry']

export default function Page() {
  const [results, setResults] = useState([])

  return (
    <div>
      <input
        type="text"
        placeholder="Поиск"
        onChange={async ({ currentTarget: { value } }) => {
          // загружаем модуль динамически
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Результаты поиска: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

Это пример начала поиска в библиотеке данных, когда пользователь только вводит буквы своего запроса.

Автоматическая статическая оптимизация

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

Оптимизированные страницы будут доступны по ссылке:

.next/server/pages/about.html

Если на эту страницу добавить getServerSideProps, то результат будет следующий:

.next/server/pages/about.js

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

Специальная функция фреймворка next export дает возможность применять готовые варианты разметки для динамического или иного рендеринга без использования удаленного сервера, то есть скачанные в готовом виде на компьютер:

next build && next export

Абсолютный импорт и синонимы модулей

С помощью настроек в tsconfig.json или jsconfig.json можно установить базовый URL для импорта и определить синонимы для путей.

// `tsconfig.json` или `jsconfig.json`
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Функция paths находит синонимы для путей моделей программы, то есть все маршруты, ведущие на одну страницу:

// `tsconfig.json` или `jsconfig.json`
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["components/*"]
    }
  }
}

Кастомный сервер 

Next.js позволяет создать собственный сервер для более гибкой настройки.

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // `true` обеспечивает разбор строки запроса
    const parseUrl = parse(req.url, true)
    const { pathname, query } = parseUrl

    switch (pathname) {
      case '/a':
        return app.render(req, res, '/a', query)
      case '/b':
        return app.render(req, res, '/b', query)
      default:
        handle(req, res, parsedUrl)
    }
  }).listen(3000, (err) => {
    if (err) throw err
    console.log('Запущен по адресу: http://localhost:3000')
  })
})

Его параметры можно задать отдельно.

Кастомное приложение

Аналогично создается пользовательское приложение:

// pages/_app.js
import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)

  return { ...appProps }
}

export default MyApp

Здесь функция app создает приложение из набора страниц, а также сохраняет его при изменении исходников.

Кастомные страницы ошибок

Можно создать специальные страницы для обработки ошибок 404 и 500.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Страница не найдена</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Ошибка на сервере</h1>
}

С дополнением компонента Error можно также получить доступ к набору функционала для работы с ними и устранения.

Директория src

С этим полезным инструментом вы можете организовать файлы вашего проекта более структурированно. Для этого нужно заменить название исходной папки pages на новую scr/pages, тем самым разделяя файлы проекта.

Локализация (интернационализация)

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

// next.config.js
module.exports = {
  i18n: {
    // Локали, поддерживаемые приложением
    locales: ['en-US', 'fr', 'nl-NL'],
    // Дефолтная локаль, которая будет использоваться
    // при посещении пользователем пути без префикса,
    // например, `/hello`
    defaultLocale: 'en-US',
    // Список доменов и привязанных к ним локалей
    // (требуется только в случае настройки маршрутизации на основе доменов)
    // Обратите внимание: поддомены должны включаться в значение домена,
    // например, `fr.example.com`
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en-US'
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl-NL'
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
        // Опциональное поле `http` может использоваться для локального тестирования
        // локали, привязанной к домену (т.е. по `http` вместо `https`)
        http: true
      }
    ]
  }
}

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

Заголовки безопасности

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

Функция headers открывает доступ к заголовкам основных из них:

// next.config.js
// Список заголовков
const securityHeaders = []

module.exports = {
  async headers() {
    return [
      {
        // Данные заголовки буду применяться ко всем роутам в приложении
        source: '/(.*)',
        headers: securityHeaders
      }
    ]
  }
}

Теперь ими можно пользоваться на свое усмотрение. Каждый заголовок в свою очередь открывает доступ к набору возможностей, например по работе с разрешенными стилями (из публичного доступа).

Работа с API в Next.js

Next.js предоставляет мощный инструментарий для работы с API. Эта возможность тоже является достаточно популярной среди разработчиков.

Next CLI

Это инструмент командной строки для управления вашим приложением на Next.js. 

Чтобы узнать доступные команды, выполните:

npx next -h

Create Next App

Стандартный способ создания нового приложения на Next.js:

npx create-next-app [app-name]
# or
yarn create next-app [app-name]

Такой командой создается любой объект.

next/router

С помощью хука useRouter вы можете получить доступ к текущему роуту и управлять навигацией:

import { useRouter } from 'next/router'

export const ActiveLink = ({ children, href }) => {
  const router = useRouter()

  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'green' : 'blue',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

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

next/link

Компонент для навигации между страницами приложения:

import Link from 'next/link'

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Главная</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>О нас</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Пост</a>
        </Link>
      </li>
    </ul>
  )
}

next/image

Эффективный компонент для работы с изображениями, обеспечивающий оптимизацию и ленивую загрузку:

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => `https://example.com/${src}?w=${width}&q=${quality || 75}`

const MyImage = (props) => (
  <Image
    loader={myLoader}
    src="me.png"
    alt=""
    role="presentation"
    width={500}
    height={500}
  />
)

next/head

Компонент для управления <head> вашего документа. Он позволяет устанавливать мета-теги, заголовки и другие элементы:

import Head from 'next/head'

export default function IndexPage() {
  return (
    <div>
      <Head>
        <title>Заголовок страницы</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Привет, народ!</p>
    </div>
  )
}

Этот компонент значительно облегчает навигацию по проекту.

next/server

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

import type { NextRequest, NextFetchEvent } from 'next/server'

export type Middleware = (
  request: NextRequest,
  event: NextFetchEvent
) => Promise<Response | undefined> | Response | undefined

Заключение

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

Интеграция с React, продуманный API и другие возможности Next.js делают его отличным выбором для новых и опытных разработчиков. Также он постоянно обновляется, а сообщество вокруг него активно растет. Это обеспечивает долгосрочную поддержку и развитие технологии.

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