next js proxy

Как настроить proxy в Next.js: Пошаговая инструкция для российских разработчиков

В современном веб-разработке важна безопасность и производительность приложений. Один из способов повысить их — использовать proxy-серверы. Особенно актуально это для тех, кто работает с Next.js — популярным фреймворком на React. В статье расскажу, как настроить proxy в Next.js, чтобы обеспечить безопасное подключение к API, избежать CORS-ошибок и повысить скорость загрузки страниц.

Почему стоит использовать proxy в Next.js?

При разработке на Next.js часто возникает необходимость обращаться к сторонним API или собственным бэкенд-сервисам. Однако прямое подключение к API с фронтенда может привести к проблемам:

• CORS — браузеры блокируют такие запросы по соображениям безопасности.
• Безопасность — скрытие ключей API и конфиденциальных данных.
• Производительность — уменьшение времени отклика за счет кеширования и оптимизации.

Использование proxy — это отличный способ решить эти задачи без сложных настроек сервера.

Как настроить proxy в Next.js: пошаговая инструкция

1. Установка необходимых зависимостей

Для начала нужно выбрать подходящий инструмент. В Next.js отлично подходит http-proxy-middleware. Его можно установить командой:

npm install http-proxy-middleware

или

yarn add http-proxy-middleware

2. Создание файла для middleware

В Next.js (с версии 12 и выше) есть встроенная поддержка middleware. Для настройки proxy создадим файл middleware.js в корне проекта:

import { NextResponse } from 'next/server'
import { createProxyMiddleware } from 'http-proxy-middleware'

export function middleware(request) {
 const url = request.nextUrl.clone()

 // Обрабатываем запросы, начинающиеся с /api/proxy
 if (url.pathname.startsWith('/api/proxy')) {
 // Настройка proxy
 const proxy = createProxyMiddleware('/api/proxy', {
 target: 'https://external-api.com', // URL вашего API
 changeOrigin: true,
 pathRewrite: {
 '^/api/proxy': '', // удаляет /api/proxy из пути
 },
 })

 // Передача запроса через proxy
 return new Promise((resolve, reject) => {
 proxy(request.rawBody, request.headers, (err) => {
 if (err) reject(err)
 else resolve(NextResponse.next())
 })
 })
 }

 return NextResponse.next()
}

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

3. Использование proxy в API-запросах

Теперь в коде вашего Next.js вы можете делать запросы к /api/proxy, и они автоматически будут перенаправляться на внешний API:

fetch('/api/proxy/users')
 .then(res => res.json())
 .then(data => console.log(data))

Это обеспечит безопасность ключей API и устранит CORS.

Альтернативный способ: настройка прокси через next.config.js

Если вы хотите настроить прокси для статических ресурсов или API, можно воспользоваться настройками переписывания (rewrites):

// next.config.js
module.exports = {
 async rewrites() {
 return [
 {
 source: '/api/proxy/:path*',
 destination: 'https://external-api.com/:path*',
 },
 ]
 },
}

Такой подход проще и подходит для большинства задач.

Итог

Настройка proxy в Next.js — это мощный инструмент для повышения безопасности и скорости вашего сайта. Используйте http-proxy-middleware или встроенные возможности Next.js для переписывания маршрутов. Главное — правильно определить цели и убедиться, что ваши запросы проходят через безопасный канал.