Давайте поговорим о маршрутизации в Nextjs. Сегодня мы поговорим об одном из самых мощных промежуточных программ. Промежуточное программное обеспечение в Nextjs предлагает мощный и гибкий способ как перехвата запросов от сервера, так и управления потоком запросов (перенаправление, перезапись URL-адресов), а также глобального улучшения таких функций, как аутентификация, заголовки, сохранение файлов cookie.

Создание промежуточного программного обеспечения

Давайте создадим приложение Middleware Next.js. Прежде всего, мы создадим новый файл для промежуточного программного обеспечения, например middleware.js или middleware.ts, в папке src. Промежуточное программное обеспечение в Next.js должно позволить вам точно контролировать, где оно будет активным (т. е. пользовательская конфигурация сопоставления или использование функций isXXX)

Перенаправление

Используя в качестве примера перенаправление, давайте представим себе сценарий, в котором переход к /profile должен перенаправить пользователя на домашнюю страницу. С помощью пользовательского подхода к настройке сопоставителя мы можем добиться этого, импортировав необходимые типы, определив функцию промежуточного программного обеспечения и указав конфигурацию сопоставителя:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

В этом примере функция промежуточного программного обеспечения проверяет, является ли путь URL-адреса запроса /profile, и перенаправляет пользователя на домашнюю страницу.

Для подхода с условными операторами мы можем изменить код следующим образом:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

В этом случае промежуточное программное обеспечение проверяет путь URL-адреса запроса и перенаправляет пользователя на маршрут /hello, если путь равен /profile.

Промежуточное ПО в Next.js выходит за рамки простой обработки перенаправлений. Он также позволяет перезаписывать URL-адреса, что может быть полезно для поддержки устаревших URL-адресов или оптимизации SEO. При изменении перенаправления на перезапись в предыдущих примерах URL-адрес в браузере останется прежним (/profile), но содержимое ответа изменится на содержимое из маршрута /hello.

Использование файлов cookie

Наконец, давайте рассмотрим использование файлов cookie и заголовков в промежуточном программном обеспечении. Мы можем изменить наше промежуточное программное обеспечение для обработки пользовательских настроек тем и добавить собственный заголовок для всех ответов:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

В этом примере мы сначала проверяем, есть ли у пользователя предпочтения темы, сохраненные в файле cookie. Если нет, мы устанавливаем темную тему, добавляя файл cookie. Затем мы добавляем к ответу собственный заголовок, который может быть полезен для передачи дополнительной информации или в целях отладки.

Как видите, промежуточное ПО в Next.js — это мощный инструмент, который позволяет эффективно контролировать и перехватывать цикл запрос-ответ, обеспечивая перенаправление, перезапись URL-адресов, а также манипулирование заголовками и файлами cookie. Овладев промежуточным программным обеспечением, вы сможете улучшить возможности маршрутизации в своих приложениях Next.js и создать более надежный и настраиваемый пользовательский интерфейс.

«Промежуточное ПО в Next.js — это мощная функция, предлагающая надежный способ перехвата и управления потоком запросов и ответов в ваших приложениях». - Документация Next.js

Заключение

Подводя итог, мы узнали, как определять промежуточное программное обеспечение в Next.js, изучили два основных подхода (конфигурация пользовательского сопоставления и условные операторы) и применяли промежуточное программное обеспечение для обработки перенаправлений, перезаписи URL-адресов и управления файлами cookie и заголовками. . Эти знания помогут вам вывести ваши приложения Next.js на новый уровень, используя гибкость и контроль, обеспечиваемые промежуточным программным обеспечением.