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

@hermina.hauck 

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

Вот основные шаги для работы с middleware в Next.js:

1. Создание middleware: Создайте файл middleware.js в корне вашего проекта или в корне директории, где вы хотите применить middleware, например, app/ либо pages/.
2. Определение middleware: Внутри этого файла экспортируйте функцию middleware, которая будет принимать объект request и возвращать объект response.

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

// middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  // Пример: простой лог
  console.log('Запрос:', request.url);

  // Пример: перенаправление неавторизованных пользователей
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    const isAuthorized = checkAuthorization(request); // Ваша функция проверки авторизации
    if (!isAuthorized) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  // Вернуть null или NextResponse.next() для продолжения запроса
  return NextResponse.next();
}

function checkAuthorization(request) {
  // Логика проверки авторизованности пользователя
  return false; // По умолчанию все не авторизованы
}

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

1
2
3
4
5

// middleware.js

export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*'], // Применять только к определенным маршрутам
};

1. Особенности использования: Middleware выполняется на Edge Functions, что делает их быстрее и уменьшает время до первого байта (TTFB). Они выполняются до отрисовки страницы или срабатывания API-роута. Не имеют доступа к файлам модуля Node.js или библиотекам, требующим файловой системы сервера.
2. Деплой и тестирование: Запустите приложение в режиме разработки (next dev), чтобы тестировать локально. При деплое убедитесь, что ваша платформа поддерживает так называемые Edge Functions (такие как Vercel).

Middleware в Next.js предоставляет расширенные возможности контроля потока запросов, и его использование может значительно улучшить архитектуру вашего приложения.