Заметки про React(@ru_react_notes). Как использовать Next.js мидлвары В блоге Криса Николаса вышла статья о том, как можно использовать

Как использовать 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()
}