Почему я развертываю большинство своих проектов на Next.js в Cloudflare с помощью OpenNext

За последний год я развернул несколько проектов на Next.js в Cloudflare, включая Learn English Sounds (платформа для изучения произношения с более чем 900 статьями в 4 языках, обрабатывая около 10 тысяч сессий в месяц), этот сайт-портфолио и несколько других.

Я пробовал Vercel, AWS, Google Cloud, самостоятельный хостинг. Но я постоянно возвращаюсь к связке Next.js + OpenNext + Cloudflare. Не всегда. Мое приложение для тренировки акцента на accent.learnenglishsounds.com работает на Firebase Hosting с бэкендом на Cloud Run, потому что там это имело больше смысла. Но для сайтов с большим объемом контента Cloudflare теперь мой выбор по умолчанию.

Интересный момент: недавно я заметил, что сайты федеральных органов власти, такие как techforce.gov, safedc.gov и americabydesign.gov, используют именно этот стек. Next.js на Cloudflare через OpenNext. Если федералы доверяют этому для важных проектов, значит, это явно готово к продакшену.

Что такое OpenNext?

Проблема в следующем: Next.js разработан Vercel, и лучшие функции (ISR, middleware, оптимизация изображений) встроены в инфраструктуру Vercel. Разверните где-то еще, и вы что-то потеряете.

OpenNext решает эту проблему. Пакет @opennextjs/cloudflare преобразует сборку Next.js во что-то, что Cloudflare Workers могут запускать нативно: App Router, серверные компоненты, API-маршруты — всё.

Почему Cloudflare, а не Vercel?

Vercel — отличный сервис. DX (Developer Experience) действительно лучший в своем классе. Но вот почему я перешел:

1. Стоимость при масштабировании

Бесплатный тариф Vercel щедр для хобби-проектов, но расходы быстро растут с увеличением трафика. Однажды я получил счет на 130 долларов. Справедливости ради, Vercel вернул часть суммы после моего обращения. Но для простых контентных сайтов такой сюрприз неустойчив. Learn English Sounds обслуживает тысячи посетителей ежедневно на 4 языках, и только трафик будет продолжать увеличивать эти счета.

Cloudflare предоставляет мне:

• Неограниченную пропускную способность (на всех тарифах)
• 500 сборок в месяц бесплатно, неограниченно на платных тарифах
• Распределение CDN по 300+ точкам присутствия (edge locations)

Я плачу 5 долларов в месяц за платный тариф Workers. Это покрывает несколько продакшен-сайтов.

2. Глобальная производительность

Сеть Cloudflare edge огромна. Статические ресурсы кэшируются в точках присутствия по всему миру. При s-maxage=31536000 повторные посетители получают почти мгновенную загрузку.

3. Интегрированная экосистема

Cloudflare — это не просто хостинг. Я использую:

• Cloudflare Images: Автоматическая оптимизация и изменение размера изображений
• Turnstile: Защита от ботов без навязчивых CAPTCHA
• D1: Serverless SQLite для простых нужд базы данных
• KV: Хранилище ключ-значение для кэширования и конфигурации
• Workers: Edge-функции, когда нужна кастомная логика

Одна панель управления, один счет.

Настройка

Вот типичное развертывание:

1. Установка зависимостей

npm install @opennextjs/cloudflare

2. Конфигурация OpenNext

Создайте open-next.config.ts:

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({});

3. Добавление wrangler.toml

name = "my-nextjs-site"
main = ".open-next/worker.js"
compatibility_date = "2025-09-11"
compatibility_flags = ["nodejs_compat"]

[assets]
  directory = ".open-next/assets"
  binding = "ASSETS"

4. Сборка и развертывание

npx opennextjs-cloudflare build
npx wrangler deploy

Готово. Вы работаете на Cloudflare Workers.

Что работает хорошо

• App Router: Полная поддержка RSC, макеты, состояния загрузки
• API Routes: Работают как app/api, так и pages/api
• Middleware: Запускается на edge с полным доступом к API Request/Response
• Static Generation: generateStaticParams работает как ожидалось
• Image Optimization: Работает через Cloudflare Images

Несколько моментов, на которые стоит обратить внимание

На что стоит обратить внимание:

• Ограничения ISR: Инкрементальная статическая регенерация работает иначе. Я использую вместо этого паттерны stale-while-revalidate.
• API Node.js: Некоторые API Node.js недоступны в Workers. По возможности придерживайтесь Web API.
• Время сборки: Большие сайты собираются дольше, так как все компилируется в код, совместимый с edge.
• Отладка: Сообщения об ошибках могут быть неясными. Используйте wrangler dev локально, чтобы поймать проблемы на ранней стадии.

Когда использовать этот стек

Лучше всего подходит для:

• Сайтов с большим объемом контента (блоги, документация, маркетинговые страницы)
• Многоязычных приложений
• Проектов, где важна предсказуемость затрат
• Команд, которые уже используют Cloudflare для DNS или безопасности

Начало работы

Если вы хотите попробовать:

1. Ознакомьтесь с документацией OpenNext для Cloudflare
2. Начните с простого проекта, чтобы понять процесс сборки
3. Используйте wrangler dev для локальной разработки
4. Настройте предпросмотр развертываний для pull-запросов

Кривая обучения минимальна, если вы уже знаете Next.js. Большая часть вашего кода останется прежней.