Учебник по Next.js

Next.js — это открытый фреймворк на основе React для создания быстрых современных веб-приложений.

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

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

Связь с React

React — это JavaScript-библиотека для создания пользовательских интерфейсов, а Next.js — это фреймворк, построенный на основе React.

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

Для кого этот урок?

Если у вас есть базовые знания HTML и CSS, вы можете изучить этот учебник и затем разработать собственный сайт.

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

У Next.js относительно низкий порог входа. Он построен на React, одном из самых популярных фронтенд-фреймворков на сегодняшний день.

Если вы уже немного знакомы с React, изучение Next.js будет проще.

Предварительные требования для чтения этого учебника:

Прежде чем приступить к чтению этого руководства, вы должны обладать базовыми знаниями HTML, CSS и JavaScript. Если вы ещё не знакомы с этими концепциями, рекомендуем сначала прочитать следующие руководства:

Примеры Next.js

По умолчанию Next.js создаёт файл index.js в папке pages. Это домашняя страница приложения. Мы можем изменить код этого файла на следующий:

Примеры Next.js

export default function Home() { return <div>Hello, World!</div>; }

Ключевые особенности

  • Маршрутизация на основе файловой системы:Next.js использует файловую систему для автоматического создания маршрутов. Вам просто нужноpagesсоздавать файлы в каталоге, и они автоматически сопоставляются с соответствующими маршрутами, без дополнительной настройки маршрутизации.
  • Статическая генерация (SSG) и серверный рендеринг (SSR):Next.js поддерживает оба метода рендеринга, позволяя гибко выбирать по мере необходимости. Статическая генерация подходит для большинства случаев, особенно для страниц, содержимое которых нечасто меняется, тогда как SSR подходит для страниц, которым требуется динамически получать данные.
  • Маршруты API:Next.js позволяет создавать маршруты API непосредственно в вашем приложении. Вы можетеpages/apiлегко создавать конечные точки backend API в каталоге, обрабатывая логику фронтенда и бэкенда.
  • Автоматическое разделение кода:Каждая страница загружает только необходимый ей код JavaScript, обеспечивая более быстрый запуск приложения и снижая ненужное потребление ресурсов.
  • Оптимизация изображений:В Next.js есть встроенная функциональность оптимизации изображений. Используяnext/imageкомпонента можно автоматически выбирать лучший формат, сжатие, ленивую загрузку и т. д. для изображений, чтобы повысить производительность загрузки страницы.
  • Поддержка TypeScript:Next.js поддерживает TypeScript по умолчанию, позволяя разработчикам пользоваться более строгой проверкой типов во время разработки.

Ссылки

Официальный сайт Next.js:https://nextjs.org/

Официальная документация Next.js:https://nextjs.org/docs

Исходный код на GitHub:https://github.com/vercel/next.js

Другие расширения