Как работать с middleware в Next.js для обработки запросов?

@charles.orn 

В Next.js middleware — это функция, которая позволяет перехватывать и обрабатывать запросы на уровне сервера перед тем, как они дойдут до конечной точки обработки, такой как страница или API-роут. Они могут быть полезны для выполнения различных задач, например, аутентификации, ведения журнала, переадресации и многого другого.

Вот как вы можете работать с middleware в Next.js:

1. Создание Middleware

В Next.js 12 и выше вы можете создавать middleware, добавляя файл middleware.ts или middleware.js в корень вашего проекта или в определенные папки.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// middleware.ts

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// Middleware функция
export function middleware(request: NextRequest) {
  // Пример проверки наличия куки
  const token = request.cookies.get('token')?.value

  if (!token) {
    // Если токена нет, перенаправляем пользователя на страницу логина
    return NextResponse.redirect(new URL('/login', request.url))
  }

  // Если токен есть, продолжаем
  return NextResponse.next()
}

// Укажите пути, на которые это middleware должно применяться
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
}

2. Конфигурация Matcher

Опция matcher в конфигурации позволяет указать, к каким путям применять middleware. Вы можете использовать регулярные выражения и ацеметрики (как показано выше) для указания путей.

3. Использование NextResponse

NextResponse предоставляет различные методы для взаимодействия с ответом:

• NextResponse.next(): продолжает запрос, передавая его следующему обработчику.
• NextResponse.redirect(url): перенаправляет запрос на указанный URL.
• NextResponse.rewrite(url): переписывает запрос так, что он на самом деле попадает на другой URL, это полезно для более сложных сценариев роутинга.

4. Деплой и поддержка

Middleware полностью поддерживаются в средах Vercel и других облачных провайдерах, которые поддерживают платформу Edge Functions. Это позволяет обрабатывать запросы близко к пользователю с низкой задержкой.

Рекомендации

• Убедитесь, что ваша логика в middleware не слишком сложная и выполняется быстро, чтобы не замедлять обработку запросов.
• Используйте middleware для задач, которые действительно должны быть выполнены на уровне запроса, например, переадресации или проверки авторизации.
• Тестируйте middleware локально, чтобы убедиться в корректности её работы перед деплоем.

Middleware в Next.js позволяют более гибко и мощно управлять обработкой запросов, следуя концепциям serverless и edge computing.