2022-07-29 12:40:04
Как использовать Next.js мидлварыВ блоге Криса Николаса вышла статья о том, как можно использовать Next.js мидлвары. Файл мидлвара должен лежать в корневой папке проекта с названием middleware.ts.
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware (request: NextRequest) {
return NextResponse.next()
}
Эта функция будет запускаться перед каждой загрузкой страницы, API роута или файла на сайте. Мидлвар не может возвращать Response. Также можно настроить работу мидлвара только для отдельных страниц, экспортировав config с массивом URL в файле middleware.ts:
export const config = {
matcher: ['/about', '/articles/:path*']
}
Какие есть возможные варианты использования мидлваров:
- Редирект на другую страницу.
- Переписывание страницы, т.е. использование другой страницы для данного URL.
- Проверка UserAgent. Можно делать редирект или переписывание страницы на мобильную/десктопную версию сайта.
- Проверка доступа. Можно получить из запроса токен пользователя и проверить доступ к странице.
- Счетчик посещений.
// Мидлвар проверки доступа
const secretKey = 'artichoke'
export function middleware (request: NextRequest) {
if (request.nextUrl.pathname === '/api/query') {
const headerKey = request.headers.get('secret-key')
// If secret keys match, allow access
if (headerKey === secretKey) {
return NextResponse.next()
}
// Otherwise, redirect to your custom error page
const url = request.nextUrl.clone()
url.pathname = '/unauthorised'
return NextResponse.redirect(url)
}
return NextResponse.next()
}
https://www.ctnicholas.dev/articles/how-to-use-nextjs-middleware
1.2K viewsIlmir Shaikhutdinov, 09:40
З
