Nginx для Next.js: кэширование, security headers и оптимизация за 30 минут

У тебя Next.js приложение на VPS за $5. Всё работает, но можно лучше. Сегодня расскажу, как за 30 минут ускорить сайт и закрыть основные дыры в безопасности.

Проблема

Стандартный nginx конфиг для Next.js — это просто proxy_pass. Никакого кэширования, никаких security headers. PageSpeed ругается, безопасность на нуле.

1. Кэширование на уровне nginx

Next.js отдаёт статику (JS, CSS, картинки) с правильными заголовками, но HTML-страницы помечает как no-cache. Для портфолио или блога это избыточно — контент меняется раз в день.

Настраиваем proxy_cache

В nginx.conf (секция http):

proxy_cache_path /var/cache/nginx/myapp 
  levels=1:2 
  keys_zone=myapp:10m 
  max_size=100m 
  inactive=60m 
  use_temp_path=off;

В конфиге сайта:

# Статика Next.js — кэшируем навечно
location /_next/static/ {
    proxy_pass http://127.0.0.1:3000;
    proxy_cache myapp;
    proxy_cache_valid 200 365d;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

# HTML — кэшируем на 5 минут
location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_cache myapp;
    proxy_cache_valid 200 5m;
    proxy_ignore_headers Cache-Control Set-Cookie;
    proxy_cache_use_stale error timeout updating;
}

Результат: Повторные запросы отдаются из кэша nginx за ~1мс вместо ~100мс.

2. Security Headers

Без них ваш сайт уязвим для кликджекинга, XSS, MIME-спуфинга.

# Обязательный минимум
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Strict-Transport-Security "max-age=31536000" always;

# Запрещаем доступ к камере, микрофону, геолокации
add_header Permissions-Policy 
  "camera=(), microphone=(), geolocation=(), payment=()" always;

# Content Security Policy
add_header Content-Security-Policy 
  "default-src 'self'; 
   script-src 'self' 'unsafe-inline' 'unsafe-eval' https://mc.yandex.ru; 
   style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
   font-src 'self' https://fonts.gstatic.com; 
   img-src 'self' data: blob:; 
   connect-src 'self' https://mc.yandex.ru;" always;

Как проверить

curl -sI https://вашсайт.ru | grep -E "X-Content|X-Frame|Strict|Permissions"

Все заголовки должны быть в ответе.

3. Gzip сжатие

Обычно включено по умолчанию, но проверьте:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json 
  application/javascript text/xml application/xml 
  text/javascript image/svg+xml;

Результат: Размер HTML/CSS/JS уменьшается на 60-80%.

4. Кэширование картинок

Если используете Next.js Image Optimization:

location /_next/image {
    proxy_pass http://127.0.0.1:3000;
    proxy_cache myapp;
    proxy_cache_valid 200 30d;
    add_header Cache-Control "public, max-age=2592000";
}

Результаты

До и после на моём alexzabrodin.pro:

Чеклист

• proxy_cache настроен
• Статика кэшируется с immutable
• HTML кэшируется на 5 минут
• Security headers добавлены
• HSTS включён
• Gzip работает
• CSP настроен под ваши скрипты

Все конфиги — рабочие, проверены на живом сервере. Копируйте и адаптируйте под свой проект.