Структуризация полноценного проекта Next.js 15

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

Изменения в Next.js 15

Next.js 15 принесет несколько ключевых изменений, которые необходимо учитывать при структуризации проекта. Во-первых, App Router стал дефолтным маршрутизатором, и все новые функции будут добавляться именно сюда. Это означает, что для новых проектов рекомендуется начинать с директории app/, поскольку именно там будут реализованы параллельные маршруты, перехватывающие маршруты, группы маршрутов и потоковая передача.

Серверные Компоненты и Удаление API Маршрутов

В Next.js 14 и выше компоненты по умолчанию являются серверными. Это означает, что они могут直接 получать данные с сервера без необходимости создания отдельных API маршрутов или использования клиентской стороны для получения данных. Это существенно упрощает код и уменьшает необходимость в дополнительных библиотеках для обработки состояний загрузки.

// app/dashboard/page.tsx
async function DashboardPage() {
  const metrics = await db.query('SELECT * FROM metrics WHERE date = $1', [today]);
  return <MetricsGrid data={metrics} />;
}

Серверные Действия и Обработка Форм

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

// app/actions/leads.ts
'use server';
export async function createLead(formData: FormData) {
  const email = formData.get('email') as string;
  await db.insert('leads', { email, source: 'website' });
  revalidatePath('/dashboard');
}

// app/contact/page.tsx
import { createLead } from '@/app/actions/leads';
export default function ContactPage() {
  return (
    <form action={createLead}>
      <input name="email" type="email" required />
      <button type="submit">Get in Touch</button>
    </form>
  );
}

Производственная Структура Папок

После доставки более 50 проектов на базе Next.js 15, стала очевидна структура, которая масштабируется и поддерживается легко:

src/
├── app/ # App Router (маршруты + макеты)
│   ├── (marketing)/ # Группа маршрутов: публичные страницы
│   │   ├── page.tsx # Главная страница
│   │   ├── blog/
│   │   └── pricing/
│   ├── (dashboard)/ # Группа маршрутов: аутентифицированные страницы
│   │   ├── layout.tsx # Проверка аутентификации + боковая панель
│   │   ├── dashboard/
│   │   └── settings/
│   ├── api/ # Только для веб-хуков и внешних интеграций
│   │   └── webhooks/
│   ├── actions/ # Серверные действия
│   └── layout.tsx

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