Проміжне програмне забезпечення в Next.js

Проміжне програмне забезпечення (Middleware) в Next.js — це функція, яка виконується перед обробкою кожного запиту. Вона дозволяє перехоплювати запити та змінювати відповідь перед тим, як вона досягне користувача.

Як створити проміжне програмне забезпечення

Проміжне програмне забезпечення визначається у файлі middleware.ts в кореневій директорії проекту (поряд з app/ або pages/):

tsx

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  if (pathname.startsWith('/admin')) {
    const token = request.cookies.get('session')
    if (!token) {
      return NextResponse.redirect(new URL('/auth/login', request.url))
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/admin/:path*', '/settings/:path*']
}

Визначення відповідності (Matcher)

config.matcher визначає, які шляхи активують проміжне програмне забезпечення:

tsx

export const config = {
  matcher: [
    '/admin/:path*',
    '/settings/:path*',
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ]
}

Без визначення відповідності, проміжне програмне забезпечення виконується для кожного запиту, включаючи статичні файли. Це зайве навантаження.

Загальні сценарії

Авторизація

tsx

export function middleware(request: NextRequest) {
  const token = request.cookies.get('session')
  const isAuthPage = request.nextUrl.pathname.startsWith('/auth')

  if (!token && !isAuthPage) {
    return NextResponse.redirect(new URL('/auth/login', request.url))
  }

  if (token && isAuthPage) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }

  return NextResponse.next()
}

Інтернаціоналізація (i18n)

Ось як працює локалізація на IT Lead: проміжне програмне забезпечення визначає мову користувача та перенаправляє на відповідний шлях.

tsx

const locales = ['ru', 'en']
const defaultLocale = 'ru'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  const hasLocale = locales.some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )

  if (hasLocale) return NextResponse.next()

  const locale = request.headers.get('accept-language')?.startsWith('en')
    ? 'en'
    : defaultLocale

  return NextResponse.redirect(
    new URL(`/${locale}${pathname}`, request.url)
  )
}

Додавання заголовків

tsx

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  response.headers.set('x-request-id', crypto.randomUUID())
  response.headers.set(
    'Content-Security-Policy',
    "default-src 'self'"
  )

  return response
}

Edge Runtime

Проміжне програмне забезпечення виконується на Edge Runtime, а не на Node.js. Це означає:

Швидкий старт (без холодного старту)
Обмежений API (без файлової системи, без рідних модулів Node.js)
Обмеження за розміром (1 МБ)

Обмеження:

Ви не можете використовувати Prisma, важкі npm пакети або безпосередньо отримувати доступ до бази даних у проміжному програмному забезпеченні. Для складної логіки авторизації краще перевіряти токен у проміжному програмному забезпеченні та виконувати детальні перевірки прав доступу в серверних компонентах або Server Actions.

Послідовність дій

Проміжне програмне забезпечення може виконувати кілька дій послідовно:

tsx

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // 1. Логування
  console.log(`${request.method} ${request.nextUrl.pathname}`)

  // 2. Додавання заголовка
  response.headers.set('x-pathname', request.nextUrl.pathname)

  // 3. A/B тестування
  if (!request.cookies.get('ab-variant')) {
    response.cookies.set('ab-variant', Math.random() > 0.5 ? 'A' : 'B')
  }

  return response
}

Корисні ресурси

nextjs.org/docs — Проміжне програмне забезпечення
Посилання на API проміжного програмного забезпечення

Суміжні теми

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань