Frontend Academy · Урок

Маршруты API и промежуточное ПО Next.js

«Маршруты API и промежуточное ПО Next.js» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Зачем нужны маршруты API

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

Маршруты API в маршрутизаторе страниц

Файлы в pages/api/ экспортируют функцию по умолчанию с параметрами в стиле Express (req, res).

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Обработчики маршрутов в маршрутизаторе приложения

Маршрутизатор приложения использует стандартный для Web API Request/Response. Каждый метод HTTP экспортируется по именованному имени.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Динамические маршруты API

Динамические сегменты работают так же: app/api/users/[id]/route.ts соответствует /api/users/123.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Чтение cookies и заголовков

В маршрутизаторе приложения используйте вспомогательные функции из next/headers, привязанные к конкретному запросу.

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Потоковые ответы

Обработчики маршрутов могут возвращать потоковый ответ — это удобно для генерации ответов в чатах с ИИ или создания больших файлов.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Middleware — выполнение до маршрутов

middleware.ts в корне проекта выполняется до того, как запросы достигнут страниц или маршрутов API. Используйте его для проверки аутентификации, перенаправлений, изменения заголовков и A/B-тестирования.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Сопоставление для middleware

Ограничьте пути, для которых выполняется middleware, с помощью конфигурации сопоставления.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Среда выполнения middleware

По умолчанию middleware выполняется в Edge Runtime — лёгкой изолированной среде V8, а не в полноценном Node. Доступные API ограничены: нельзя использовать модули Node, такие как fs, и нативные зависимости.

Шаблон аутентификации с middleware

Распространённый подход: проверять JWT в middleware, перенаправлять на страницу входа, если токен отсутствует или недействителен, и прикреплять к заголовку запроса пользователя, помеченного как decoded, чтобы последующие маршруты могли его прочитать.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Ограничение частоты запросов в middleware

Объедините middleware с хранилищем KV (Upstash, Vercel KV), чтобы ограничивать частоту запросов для каждого IP до обращения к логике API.

Когда API-маршруты не подходят (NOT)

Для отдельных микросервисов или общих API разворачивайте полноценную серверную часть (Hono, Express, NestJS). Маршруты API Next.js отлично подходят для проксирования, вебхуков и конечных точек конкретного приложения, но не для предоставления публичного API другим клиентам.

Быстрая проверка

Где выполняется middleware Next.js и каков наиболее распространённый вариант его использования?

Итоги: маршруты API и middleware

Маршрутизатор страниц: pages/api с req/res. Маршрутизатор приложения: app/api/.../route.ts с экспортами методов (GET/POST и т. д.) на основе Request/Response. Читайте cookies и заголовки через next/headers. Потоковые ответы создавайте с помощью ReadableStream. middleware.ts выполняется в Edge до маршрутов — для аутентификации, перенаправлений и заголовков. Конфигурация сопоставления ограничивает пути. Для публичных API используйте полноценную серверную часть.

Часто задаваемые вопросы

Урок «Маршруты API и промежуточное ПО Next.js» бесплатный?

Да — полный текст урока «Маршруты API и промежуточное ПО Next.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Маршруты API и промежуточное ПО Next.js»?

Создавайте бессерверные конечные точки API в каталоге api/, обрабатывайте запросы в обработчиках маршрутов и запускайте пограничное промежуточное ПО для аутентификации и перенаправлений Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Маршруты API и промежуточное ПО Next.js»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy