Классические одностраничные приложения (Single Page Applications, SPA) на базе чистого React (Vite / Create React App) отдают браузеру пустой HTML-контейнер (<div id="root"></div>) и массивный JavaScript-бандл. Браузер вынужден скачать мегабайты скриптов, распарсить их, выполнить и лишь затем отправить сетевые запросы к API за контентом. Это приводит к долгому белому экрану (высокий Time to Interactive, плохой Largest Contentful Paint) и катастрофическим проблемам с поисковой индексацией (SEO).
Next.js 16 App Router совершает фундаментальный архитектурный сдвиг: фреймворк переносит первичную генерацию интерфейса на сторону сервера (Node.js 24+). Браузер мгновенно получает готовый, семантически наполненный HTML-документ, стилизованный через Tailwind CSS v4, который сразу виден пользователю и поисковым роботам.
Ключевым соглашением Next.js является файловая маршрутизация (File-system Based Routing) внутри папки app/. Папки в файловой системе определяют пути в адресной строке URL, а специальные зарезервированные имена файлов (page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx) формируют иерархию компонентов страницы.
Взглянем на разницу в архитектуре доставки контента:
+-------------------------------------------------------------------------+
| АРХИТЕКТУРНЫЙ СДВИГ: SPA vs NEXT.JS 16 |
+-------------------------------------------------------------------------+
| ЧИСТЫЙ REACT SPA (Клиентский рендеринг): |
| Сервер отдаёт: <div id="root"></div> + 2.5 MB app.js |
| Браузер: Белый экран -> скачивание JS -> парсинг -> запрос к API|
| Результат: TTFB быстрый, но реальный контент через 2.8 секунды! |
+-------------------------------------------------------------------------+
| NEXT.JS 16 APP ROUTER (Server Components): |
| Сервер отдаёт: Полноценный HTML с готовым текстом и картинками |
| Браузер: Мгновенный показ первого кадра (FCP < 500 мс) |
| JS-бандл: Только интерактивные острова ('use client') |
| Результат: Мгновенный First Contentful Paint, 100% SEO-доступность|
+-------------------------------------------------------------------------+Next.js анализирует URL (например, /catalog) и находит соответствующий файл app/catalog/page.tsx.
На сервере Node.js выполняются async Server Components, напрямую читая БД или вызывая микросервисы.
Браузер начинает получать готовые чанки HTML по протоколу HTTP/2 без ожидания завершения всех долгих запросов.
Браузер скачивает компактный JS-бандл только для интерактивных кнопок и инпутов с директивой 'use client'.
Какой URL-адрес будет соответствовать файлу компонента, расположенному по пути `app/dashboard/analytics/page.tsx`?
app/ и соглашения об именах#В Next.js 16 зарезервированы специальные имена файлов:
page.tsx: уникальный UI маршрута. Без page.tsx папка считается недоступной для прямого посещения.layout.tsx: разделяемый интерфейс (Header, Sidebar, Footer), оборачивающий дочерние страницы и сохраняющий стейт при переходах.loading.tsx: встроенный Suspense-скелетон, отображаемый мгновенно, пока серверная страница загружает данные.error.tsx: предохранитель ошибок (Error Boundary) для изолированного перехвата сбоев.not-found.tsx: кастомный UI для HTTP-статуса 404.app/
├── layout.tsx # Корневой лейаут (<html>, <body>, Nav)
├── page.tsx # Главная страница (/)
├── not-found.tsx # Глобальная страница 404
├── catalog/
│ ├── layout.tsx # Подлейаут каталога (фильтры)
│ ├── page.tsx # Страница каталога (/catalog)
│ └── [slug]/ # Динамический маршрут (/catalog/macbook-pro)
│ └── page.tsx
└── api/
└── health/
└── route.ts # HTTP API эндпоинт (/api/health)app/page.tsx#По умолчанию все компоненты внутри app/ являются React Server Components (серверными компонентами):
// Это Server Component: он выполняется на сервере Node.js!
export default function HomePage() {
const serverTime = new Date().toLocaleTimeString();
return (
<main className="max-w-4xl mx-auto py-12 px-4 space-y-6">
<div className="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-accent-violet/10 text-accent-violet border border-accent-violet/20">
Next.js 16 + React 19
</div>
<h1 className="text-4xl font-extrabold text-text-primary tracking-tight">
Добро пожаловать в WPSKILLS
</h1>
<p className="text-text-muted leading-relaxed">
Серверное время генерации страницы: <strong className="text-text-primary">{serverTime}</strong>.
Этот HTML сгенерирован движком Next.js без задержек клиентского JS.
</p>
<div className="pt-4">
<a
href="/catalog"
className="inline-flex items-center px-5 py-2.5 rounded-xl bg-accent-cyan text-bg-base font-semibold hover:opacity-90 transition-opacity"
>
Перейти в каталог →
</a>
</div>
</main>
);
}В Next.js 16 Turbopack включен по умолчанию для локальной разработки, обеспечивая ускорение сборки в 5–10 раз по сравнению со старым Webpack:
# Запуск через pnpm с компилятором Turbopack:
pnpm run dev
# Локальный сервер доступен по адресу:
# Ready in 450ms on http://localhost:3000Можно ли использовать хук `useState` или обработчик `onClick` напрямую внутри файла `app/page.tsx` без дополнительных директив?
Попытка вызвать useState в серверном компоненте вызовет фатальную ошибку сборки Next.js:
// ОШИБКА:
export default function Page() {
const [count, setCount] = useState(0); // СБОЙ: Server Component не поддерживает стейт!
return <button onClick={() => setCount(1)}>Клик</button>;
}
// ПРАВИЛЬНО: вынесите интерактивную кнопку в отдельный файл с 'use client'!Обычный тег <a href="/about"> вызывает полную перезагрузку страницы в браузере, сбрасывая состояние приложения и заставляя браузер повторно скачивать все ресурсы. Всегда используйте компонент <Link href="/about"> для плавной навигации без перезагрузки (SPA-transitions).