Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Оглавление

Proxy: код до обработки запроса

Прокси (proxy) — функция, которая выполняется до того, как Next.js отрисует страницу или вызовет API. Она видит запрос и может пропустить его дальше, перенаправить на другой адрес или добавить заголовки. Обычно её используют для быстрой проверки входа и выбора языка. До Next.js 16 это называлось middleware — в старых статьях вы встретите файл middleware.ts.

Где лежит файл

Прокси — один файл proxy.ts в корне проекта, рядом с папкой app/, а не внутри неё. Начнём с простого журнала запросов:

// proxy.ts
import { NextResponse, type NextRequest } from 'next/server';
 
export function proxy(request: NextRequest) {
  console.log('Запрос:', request.nextUrl.pathname);
  return NextResponse.next();
}

Функция называется proxy. NextResponse.next() пропускает запрос дальше. Откройте несколько страниц — в терминале npm run dev появятся строки вида «Запрос: /posts».

Ограничить адреса: matcher

Без настройки прокси срабатывает на каждый запрос, включая картинки и файлы скриптов. Объект config с полем matcher оставляет только нужные адреса:

// proxy.ts (фрагмент)
export const config = {
  matcher: ['/posts/new', '/admin/:path*'],
};

:path* означает «и всё, что вложено»: /admin, /admin/users, /admin/users/5.

Перенаправление без входа

Закроем форму добавления статьи от посетителей, которые не вошли на сайт. Признаком входа будет кука session — её установку разбирает следующий урок:

// proxy.ts
import { NextResponse, type NextRequest } from 'next/server';
 
export function proxy(request: NextRequest) {
  const session = request.cookies.get('session');
 
  if (!session) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ['/posts/new'],
};

Откройте /posts/new в режиме инкогнито — браузер окажется на /login. Метод redirect принимает полный адрес, поэтому его собирают через new URL от текущего запроса.

Что ещё умеет прокси

ЗадачаКак
Прочитать кукуrequest.cookies.get('name')
Прочитать заголовокrequest.headers.get('accept-language')
ПеренаправитьNextResponse.redirect(url)
Показать другую страницу без смены адресаNextResponse.rewrite(url)
Добавить заголовок ответаresponse.headers.set('x-name', 'value')

Ограничения

Прокси должен работать быстро: он выполняется на каждый подходящий запрос. В Next.js 16 он работает в среде Node.js, но медленные запросы к базе данных здесь всё равно не делают. Прокси подходит для быстрой предварительной проверки вроде наличия куки, а полная проверка прав выполняется на странице или в серверном действии. Для простых постоянных перенаправлений без условий удобнее настройка redirects в next.config.ts.

Частая ошибка

Скопировать из старой статьи файл middleware.ts с функцией middleware. В Next.js 16 это имя устарело: сборка выдаст предупреждение, а в будущих версиях код перестанет работать. Назовите файл proxy.ts, а функцию — proxy, и положите файл в корень проекта, а не в app/.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.