NextJS2

Введение

Добро пожаловать в документацию Next.js!

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

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

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

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

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

Некоторые из основных возможностей Next.js включают:

Функция	Описание
Маршрутизация	Система маршрутизации на основе файловой системы, построенная на основе компонентов сервера, которая поддерживает макеты, вложенную маршрутизацию, состояния загрузки, обработку ошибок и многое другое.
Рендеринг	Клиентский и серверный рендеринг с клиентскими и серверными компонентами. Дальнейшая оптимизация с помощью статического и динамического рендеринга на сервере с Next.js. Потоковая передача на узлах Edge и Node.js.
Получение данных	Упрощенное получение данных с помощью async/await в компонентах сервера и расширенный `fetch` API для кэширования запросов, данных и повторной проверки.
Стиль	Поддержка ваших предпочитаемых методов стилизации, включая CSS-модули, Tailwind CSS и CSS-в-JS
Оптимизации	Оптимизация изображений, шрифтов и скриптов для улучшения основных показателей производительности веб-сайта и пользовательского опыта.
TypeScript	Улучшенная поддержка TypeScript с лучшей проверкой типов и более эффективной компиляцией, а также настройка TypeScript плагина и проверки типов.

Как пользоваться этими документами

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

В правой части экрана вы увидите таблицу содержания, что упрощает навигацию между разделами страницы. Если вам нужно быстро найти страницу, вы можете использовать поле поиска вверху или ярлык поиска (Ctrl+K или Cmd+K).

Для начала ознакомьтесь с руководством по установке.

App Router против Pages Router

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

В верхней части боковой панели вы увидите раскрывающееся меню, которое позволяет переключаться между функциями App Router и Pages Router. Поскольку существуют функции, уникальные для каждого каталога, важно отслеживать, какая вкладка выбрана.

Хлебные крошки в верхней части страницы также укажут, смотрите ли вы документацию App Router или Pages Router.

Предварительные знания

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

Для получения максимальной пользы от наших документов рекомендуется иметь базовое понимание HTML, CSS и React. Если вам нужно освежить свои навыки React, ознакомьтесь с нашим курсом по основам React, который познакомит вас с основами. Затем узнайте больше о Next.js, создав приложение для управления информацией.

Доступность

Для оптимальной доступности при использовании программы чтения с экрана во время чтения документации мы рекомендуем использовать Firefox и NVDA или Safari и VoiceOver.

Присоединяйтесь к нашему сообществу

Если у вас есть вопросы по любому вопросу, связанному с Next.js, вы всегда можете задать их нашему сообществу на GitHub Discussions, Discord, Twitter и Reddit.