Next.js с нуля: создание и настройка проекта (Урок 2)

Предварительная подготовка

Убедитесь, что Node.js установлен на вашем компьютере. При необходимости, установите его с официального сайта. Также установите редактор кода (рекомендуется Visual Studio Code). Создайте пустую папку для проекта.

Создание проекта Next.js

Для создания проекта воспользуйтесь npm:

npx create-next-app@latest

Далее ответьте на вопросы:

Хотите ли вы продолжить? y (или yes)
Название проекта? . (точка)
Использовать TypeScript? n (или no)
Дополнительные препроцессоры стилей? n (или no)
Дополнительные библиотеки стилей? n (или no)
Создать папку src? n (или no)
Создать app-директорию (рекомендуется)? y (или yes)
Импортировать примеры? n (или no)

Это создаст стандартный проект Next.js.

Структура проекта

Проект содержит:

package.json: Описание проекта, скрипты (dev, build, start, lint) и зависимости (Next.js, React, React DOM). lint может быть удалена, если не используется ESLint.
next/: Рабочая папка локального сервера.
app/: Папка для файлов приложения.
node_modules/: Установленные модули.
public/: Статические файлы (изображения, видео и т.д.), доступные по прямому адресу.
.gitignore: Файлы и папки, игнорируемые Git.
next.config.js & tsconfig.json: Файлы конфигурации для Next.js и TypeScript (если используется).
package-lock.json: Файл блокировки зависимостей.
README.md: Описание проекта.

Папка app/

Основная работа ведется в папке app/, содержащей:

page.js: HTML-код главной страницы. Можно импортировать изображения и стили.
globals.css: Глобальные стили.
layout.js: Общий каркас страниц (HTML, стили, метаданные).
_app.js: Основные функции проекта.

Работа с веб-сайтом и URL-адресами

Удалите page.js и globals.css. Создайте новый page.js с содержимым <h1>Главная страница</h1>.

Для создания страницы /clients, создайте папку clients в app/ и поместите в неё page.js с содержимым <h1>Страница клиентов</h1>. Next.js автоматически обрабатывает URL-адреса по структуре папок. Обратите внимание, что HTML-код генерируется на сервере, что улучшает SEO и производительность.

Мы настроили проект Next.js, изучили его структуру и научились создавать и обрабатывать URL-адреса. В следующих уроках рассмотрим параметры URL-адресов, работу с API и многое другое.