Использование Middleware в Next.js

Что такое Middleware Next.js?

Middleware в Next.js — это фрагмент кода, который позволяет вам выполнять действия до завершения запроса и соответствующим образом изменять ответ. Он связывает входящий запрос и ваше приложение, обеспечивая гибкость и контроль над потоком запросов/ответов.

В Next.js v12 было введено Middleware для улучшения маршрутизатора Next.js на основе отзывов пользователей. В Next.js v13 улучшен API Middleware, что повышает удобство работы разработчиков и добавляет мощные функциональные возможности.

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

Как работает Middleware в Next.js?

Функции промежуточного программного обеспечения имеют решающее значение для обработки запросов и ответов в веб-приложении. Middleware работает путем перехвата запросов и ответов перед их передачей в основной код приложения.

Одной из основных функций промежуточного программного обеспечения является аутентификация. Он обеспечивает способ проверки личности пользователя перед предоставлением ему доступа к приложению. Аутентифицируя пользователей, Middleware обеспечивает доступ к защищенным ресурсам только авторизованным лицам, повышая общую безопасность приложения.

Авторизация — еще одна ключевая особенность промежуточного программного обеспечения. После аутентификации пользователей Middleware может реализовать контроль доступа на основе их ролей или разрешений. Это означает, что определенные страницы или ресурсы в приложении могут быть доступны только определенным пользователям или группам пользователей.

Кроме того, Middleware может использовать механизмы кэширования для оптимизации производительности приложения. Сохраняя часто используемые данные в кэше, Middleware снижает необходимость многократного извлечения их из базовой базы данных.

Преимущества и недостатки Middleware

Middleware позволяет добавлять функциональные возможности вашему приложению без изменения кода приложения. Это делает его отличным способом добавить новые функции или исправить ошибки без развертывания новой версии приложения. Кроме того, Middleware можно использовать для масштабирования вашего приложения путем перегрузки задач на другие серверы.

Это может повысить производительность и одновременно снизить нагрузку на серверы приложений. Middleware можно использовать для добавления функций безопасности в ваше приложение. Это может помочь защитить ваше приложение от атак и несанкционированного доступа.

Хотя использование промежуточного программного обеспечения имеет ряд преимуществ, есть и недостатки. Middleware может усложнить ваше приложение. Это может затруднить разработку, развертывание и поддержку вашего приложения. Middleware может увеличить стоимость вашего приложения. Это связано с тем, что вам необходимо будет приобрести и поддерживать Middleware.

Наконец, Middleware вызывает задержку в вашем приложении. Это связано с тем, что код промежуточного программного обеспечения должен быть выполнен, прежде чем ваше приложение сможет обработать запрос.

Когда следует использовать Middleware?

Вот несколько сценариев, в которых можно использовать Middleware Next.js:

Геолокация

Middleware Next.js обеспечивает доступ к географической информации через ключ NextRequest API geo. Это позволяет вам предоставлять пользователям контент, привязанный к определенному местоположению. Например, если вы создаете веб-сайт обувной компании с филиалами в разных регионах, вы можете отображать трендовую обувь или эксклюзивные предложения в зависимости от местоположения пользователя.

Безопасность

Используя cookies ключ, доступный в NextRequest API, вы можете устанавливать файлы cookie и аутентифицировать пользователей на своем сайте. Вы также можете повысить безопасность, заблокировав доступ ботов, пользователей или определенных регионов к вашему сайту. Переписав запрос, вы можете перенаправить их на назначенную заблокированную страницу или отобразить ошибку 404.

А/Б-тестирование

A/B-тестирование включает в себя предоставление посетителям различных версий сайта, чтобы определить, какая версия вызывает лучший отклик. Раньше разработчики проводили A/B-тестирование на стороне клиента на статических сайтах, что приводило к замедлению обработки и возможным изменениям макета.

Однако Middleware Next.js позволяет обрабатывать запросы пользователей на стороне сервера, ускоряя процесс и устраняя изменения в макете. A/B-тестирование с использованием промежуточного программного обеспечения включает использование файлов cookie для назначения пользователей определенным сегментам, а затем серверы перенаправляют пользователей на версию A или B в зависимости от назначенного им сегмента.

Создание Middleware в Next.js

Давайте создадим Middleware и добавим фрагмент кода, чтобы показать, как оно работает. Чтобы использовать Middleware, вам необходимо создать файл с именем middleware.js или middleware.ts на том же уровне, что и ваш каталог pages. В отличие от Next 12, где нам нужно добавить подчеркивание, Next 13 это не требуется. Этот файл будет содержать код, который вы хотите запустить до завершения запроса. Внутри файла вставьте это:

import { NextResponse } from "next/server";
export default function middleware(req) {
   if(req.nextUrl.pathname =="/api/hello"){
      if(req.nethod != 'POST'){
       return new NextResponse("Cannot access this endpoint with " + req.method, { status: 400})
      }
   return NextResponse.next();
   }
}

Приведенный выше код проверяет, соответствует ли URL-адрес /api/hello запроса шаблону. Если это так, код проверяет, является ли метод запроса POST методом. Если это не так, код возвращает ответ с сообщением об ошибке 400 Bad Request, включающим метод запроса. Если метод запроса — POST, он вызывает функцию NextResponse.next(), чтобы сообщить Next.js о необходимости продолжить обработку запроса. Вот наш результат: