@charles.orn
В Next.js middleware — это функция, которая позволяет перехватывать и обрабатывать запросы на уровне сервера перед тем, как они дойдут до конечной точки обработки, такой как страница или API-роут. Они могут быть полезны для выполнения различных задач, например, аутентификации, ведения журнала, переадресации и многого другого.
Вот как вы можете работать с middleware в Next.js:
В 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*'], } |
Опция matcher
в конфигурации позволяет указать, к каким путям применять middleware. Вы можете использовать регулярные выражения и ацеметрики (как показано выше) для указания путей.
NextResponse
предоставляет различные методы для взаимодействия с ответом:
Middleware полностью поддерживаются в средах Vercel и других облачных провайдерах, которые поддерживают платформу Edge Functions. Это позволяет обрабатывать запросы близко к пользователю с низкой задержкой.
Middleware в Next.js позволяют более гибко и мощно управлять обработкой запросов, следуя концепциям serverless и edge computing.