Первая программа на Next.js

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Play ITЗагрузка интерактивного демо…

Первая программа на Next.js

Next.js поверх React

React 272 рисует интерфейс в браузере. Next.js добавляет:

маршруты — URL из структуры папок;
серверный рендер — HTML приходит уже с текстом;
Route Handlers — маленький API в том же проекте;
сборку и деплой (часто Vercel).

Обзор терминов SSR/SSG: Next.js. Внешний API: Первая программа на Node.js · склейка: Fullstack на JavaScript — API и фронтенд.

Что где выполняется

Это важный ориентир для новичка:

page.tsx без 'use client' выполняется на сервере;
компонент с 'use client' выполняется в браузере;
route.ts работает как API-обработчик на стороне сервера.

Когда это разделение понятно, дальше проще работать с SSR, CORS и доступом к данным.

Что получится

Маршрут	Тип	Содержимое
`/`	Server	приветствие
`/about`	Server	вторая страница
`/counter`	Client	`useState`, кнопка
`/notes`	Client	список с внешнего API
`/api/hello`	API	JSON без Express

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

npx create-next-app@latest my-next-app

Разбор:

npx запускает пакет без глобальной установки в систему.
create-next-app@latest использует актуальную версию генератора.
my-next-app задаёт имя директории и будущего проекта.

Вопрос мастера	Рекомендация
TypeScript	Yes
ESLint	Yes
App Router	Yes (папка `app/`)
Tailwind	Yes
`src/`	по желанию

cd my-next-app
npm run dev

Разбор:

cd my-next-app переключает терминал в каталог проекта.
npm run dev запускает локальный сервер разработки Next.js.
После запуска можно открыть localhost:3000 и сразу проверять изменения.

Откройте http://localhost:3000. Если на :3000 уже крутится Node API из Первая программа на Node.js — сдвиньте API или Next (Fullstack на JavaScript — API и фронтенд).

Файлы = маршруты (App Router)

app/
├── layout.tsx
├── page.tsx         # /
├── about/
│   └── page.tsx     # /about
├── counter/
│   └── page.tsx     # 'use client'
├── notes/
│   └── page.tsx     # 'use client'
└── api/
    └── hello/
        └── route.ts # GET /api/hello

Разбор:

layout.tsx задаёт общую рамку приложения для всех страниц.
Каждая папка с page.tsx автоматически формирует маршрут по имени директории.
Блок api/.../route.ts создаёт серверный endpoint внутри этого же проекта.
Такая структура разделяет UI-маршруты и API-логику без отдельного Express-сервера.

Имя файла	Правило
`page.tsx`	Без него URL не существует
`layout.tsx`	Общая рамка; при переходах не размонтируется
`route.ts`	HTTP API, не React-страница

Layout и навигация

Link из next/link — переход без полной перезагрузки:

app/layout.tsx:

Код ITЗагрузка примера кода…

Разбор:

metadata централизованно задаёт title и description для документа.
RootLayout принимает children и оборачивает контент единым шаблоном.
Link из next/link обеспечивает навигацию без полной перезагрузки страницы.
main служит контейнером, куда Next рендерит текущий маршрут.

app/page.tsx:

export default function HomePage() {
  return (
    <section>
      <h1 className="text-2xl font-bold">Привет, Next.js</h1>
      <p>Server Component по умолчанию — без useState.</p>
    </section>
  );
}

Разбор:

Компонент рендерится на сервере по умолчанию, так как нет 'use client'.
Возвращаемая секция формирует HTML для главной страницы /.
Это базовый пример Server Component без локального состояния и обработчиков событий.

Пример композиции страницы в стиле Next.js

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

app/page.tsx:

Код ITЗагрузка примера кода…

Разбор:

Импорты показывают композицию страницы из отдельных секций и layout-компонентов.
HomePage остаётся тонким: он задаёт структуру, а детали живут в дочерних модулях.
Такой подход упрощает развитие больших страниц и командную разработку.
Фрагмент <>...</> группирует элементы без лишнего DOM-узла.

Этот паттерн хорошо масштабируется: секции развиваются независимо, а app/page.tsx остаётся читаемым.

Вторая страница

app/about/page.tsx:

export default function AboutPage() {
  return (
    <section>
      <h1 className="text-xl font-semibold">О проекте</h1>
      <p>Файл <code>app/about/page.tsx</code> → маршрут /about.</p>
    </section>
  );
}

Разбор:

AboutPage связан с URL /about по файловому маршрутизатору Next.
Компонент возвращает минимальный статический контент страницы.
Путь файла в <code> помогает увидеть прямую связь "файл → маршрут".

API Route Handler

app/api/hello/route.ts:

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from Next API' });
}

Разбор:

GET экспортируется как обработчик HTTP GET для маршрута /api/hello.
NextResponse.json(...) отправляет JSON и автоматически ставит нужные заголовки.
Это встроенный API-слой Next.js без отдельного backend-приложения.

Проверка: http://localhost:3000/api/hello

Client Component — интерактивность

app/counter/page.tsx:

Код ITЗагрузка примера кода…

Разбор:

'use client' включает клиентский режим и разрешает хуки useState.
useState(0) инициализирует счётчик нулём.
setCount((c) => c + 1) использует предыдущее значение безопасно при очередях обновлений.
Обновление state автоматически перерисовывает заголовок с новым числом.

'use client' в первой строке обязательна для useState и onClick.

Заметки — fetch на клиенте

Поднимите Node API на :3000.

app/notes/page.tsx:

Код ITЗагрузка примера кода…

Разбор:

Компонент выполняется в браузере и загружает данные в useEffect.
Тип Note фиксирует структуру элемента списка (id, text).
Блок if (!r.ok) throw ... переводит HTTP-ошибки в понятный сценарий обработки.
notes.map(...) формирует <li> для каждой заметки, а key={n.id} стабилизирует рендер.

CORS на Node — Express — middleware, маршруты и ошибки. Альтернатива: прокси в next.config.ts или server fetch ниже.

Загрузка данных на сервере (Server Component)

app/notes-server/page.tsx — без 'use client':

Код ITЗагрузка примера кода…

Разбор:

getNotes запускается на сервере и получает данные до отправки HTML клиенту.
cache: 'no-store' отключает кэш и запрашивает свежий ответ на каждый запрос.
if (!res.ok) превращает неуспешный ответ в исключение для контролируемой обработки.
NotesServerPage как async компонент рендерит список уже с готовыми данными.

Отличие	Смысл
`async function Page()`	`await fetch` на сервере Next
`cache: 'no-store'`	Свежие данные при каждом запросе
CORS	Запрос с машины Next, не из браузера пользователя

Production

npm run build
npm start

Разбор:

npm run build собирает оптимизированный production-бандл.
npm start запускает сервер на основе собранной версии.
Этот шаг проверяет, что приложение корректно работает в прод-режиме, а не только в dev.

Частые ошибки

Симптом	Причина
`useState only in Client Components`	Нет `'use client'`
404	Нет `page.tsx` в папке маршрута
CORS на `/notes`	Client fetch на другой порт
`<a href>` перезагружает всё	Используйте `<Link href>`

Что попробовать

app/blog/[slug]/page.tsx — динамический сегмент.
Route Handler POST для создания заметки.
Счётчик из 272 в app/counter/page.tsx.

Связанные материалы

Тема	Материал
Обзор Next	Next.js
React	Первая программа на React
Node API	Первая программа на Node.js · Express — middleware, маршруты и ошибки
Fullstack	Fullstack на JavaScript — API и фронтенд

Основа по протоколу

Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.

В подборках

Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:

Первые шаги (маршрут подборки) — Первая программа на Ext JS, Первая программа на Django, Первая программа на Angular, Первая программа на Django REST Framework, Первая программа на Vue.js, Первая программа на Tkinter.

Первая программа на Next.js

Первая программа на Next.js

Next.js поверх React

Что где выполняется

Что получится

Рекомендуемый порядок после первого проекта

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

Файлы = маршруты (App Router)

Layout и навигация

Пример композиции страницы в стиле Next.js

Вторая страница

API Route Handler

Client Component — интерактивность

Заметки — fetch на клиенте

Загрузка данных на сервере (Server Component)

Production

Частые ошибки

Что попробовать

Связанные материалы

В подборках

См. также

Next.js

Первая программа на Next.js​

Next.js поверх React​

Что где выполняется​

Что получится​

Рекомендуемый порядок после первого проекта​

Создание проекта​

Файлы = маршруты (App Router)​

Layout и навигация​

Пример композиции страницы в стиле Next.js​

Вторая страница​

API Route Handler​

Client Component — интерактивность​

Заметки — fetch на клиенте​

Загрузка данных на сервере (Server Component)​

Production​

Частые ошибки​

Что попробовать​

Связанные материалы​

В подборках​

Связанные темы

См. также

Next.js

Первая программа на Next.js

Next.js поверх React

Что где выполняется

Что получится

Рекомендуемый порядок после первого проекта

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

Файлы = маршруты (App Router)

Layout и навигация

Пример композиции страницы в стиле Next.js

Вторая страница

API Route Handler

Client Component — интерактивность

Заметки — fetch на клиенте

Загрузка данных на сервере (Server Component)

Production

Частые ошибки

Что попробовать

Связанные материалы

В подборках