Skip to content
EN

Запуск проекта и первый компонент

Создаем афишу, запускаем сервер и разбираем файлы проекта.

On this page

Для Next.js 16.3.8 (App Router) и React 19.3.0. Обновлено .

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

Подготовьте среду

Установите Bun и Node.js по официальным инструкциям. Bun устанавливает зависимости и запускает команды проекта. Next.js 16 требует Node.js не ниже 20.9; выбирайте поддерживаемую LTS-версию – выпуск с длительной поддержкой.

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

Терминал
bun create next-app@latest afisha

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

При настройке выберите TypeScript, ESLint, Tailwind CSS и App Router. Папку src для этих примеров не используем. Алиас (сокращенный путь для импортов) оставляем @/*. React Compiler можно оставить выключенным: учебные примеры от него не зависят. Если установщик предлагает готовый набор, выберите настройку параметров, чтобы проверить их.

Если появится вопрос о Cache Components, выберите No. Это дополнительный механизм кеширования. К теме кеша вернемся в статье о получении данных. Примеры этого курса пока используют режим без него.

Откройте созданную папку afisha в VS Code и выполните в её терминале:

Терминал
bun run dev

Команда bun run dev запускает сервер разработки. Откройте адрес Local, напечатанный в терминале: обычно это http://localhost:3000, если порт занят, сервер предложит другой. Терминал должен оставаться открытым. Для остановки используйте Ctrl+C.

Какие файлы появились

Файл или папкаНазначение
package.jsonЗависимости и команды проекта
bun.lockЗафиксированные версии зависимостей
app/page.tsxГлавная страница
app/layout.tsxОбщая оболочка страниц
app/globals.cssОбщие стили, включая подключение Tailwind
public/Картинки и другие доступные файлы

.tsx – файл TypeScript с разметкой JSX. Это запись интерфейса внутри кода, которую подробно разберем далее. Браузер не выполняет .tsx напрямую: Next.js преобразует этот код в JavaScript и готовит HTML страницы.

Первая страница

Замените содержимое app/page.tsx:

app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Куда пойти</h1>
      <p>Афиша мероприятий города.</p>
    </main>
  );
}

HomePage – компонент, функция, которая возвращает описание части интерфейса. return передает это описание React. export default делает компонент главным экспортом файла; Next.js использует его как страницу. Тексты внутри h1 и p появятся в браузере.

Сохраните файл: сервер разработки обновит страницу. Измените текст и убедитесь, что видите свое изменение. Файл app/page.tsx отвечает за страницу по адресу /; папки для других адресов изучим во втором этапе.

Разработка и готовая сборка

bun run dev удобен для изменений. Для проверки готового приложения остановите его и выполните bun run build, затем bun run start. Сборка выявляет часть ошибок, которые легко пропустить при просмотре одной страницы. Она не доказывает, что все сценарии пользователя работают правильно.

Попробуйте: добавьте второй абзац и измените название вкладки через настройки metadata в созданном app/layout.tsx. Объект metadata содержит сведения о странице; для первого шага достаточно поменять title. Справочник metadata.

Далее – JSX. Руководство установки: Next.js.