Конфигурируем веб-сервер для Next.js

Казалось бы, что развёртывание приложений на Next.js не влечёт за собой трудностей - установил зависимости, сделал "npm run build && npm run start" и проксируешь запросы на 3000-ый порт, но для оптимальной работы предстоит сделать кое-что ещё.

В данной статье мы рассмотрим как правильно сконфигурировать веб-сервер для Next.js приложения на примере Nginx.

Минимальная конфигурация выглядит так (для упрощения обойдёмся без https):

server {
  server_name example.com;

  location / {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  listen 80;
}

С этим конфигом вы действительно сможете увидеть на "example.com" свой сайт на Next.js, но есть загвоздка. Next позволяет нам генерировать статичные файлы - css, js, html и даже медиа файлы. В примере выше Node.js будет обрабатывать всю эту статику самостоятельно, но зачем нам это, когда у нас есть Nginx, которому нет равных в обработке статики? Нужно отдать эту задачу ему.

После "npm run build" наш фреймворк сгенерирует директорию ".next", в которой помимо всего прочего будут нужные нам статичные файлы.

Страницы

Начнём со статичных страниц. Они будут расположены в ".next/server/pages". Пути к ним будут такими же как и в файловой структуре вашего проекта.

server {
  server_name example.com;
  
  root /var/www/nextjs/.next/server/pages;
  
  location @proxy {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  location / {
    try_files $uri $uri/ $uri/index.html @proxy;
  }

  listen 80;
}

В примере выше мы добавили именованное расположение "@proxy", которое изначально являлось корневым расположение, а в блок "location /" поместили обычный "try_files" с фоллбэком в "@proxy". То есть если страница не была найдена в .next/server/pages, то отдаём обработку запроса Нексту, чтобы он поискал её среди динамических страниц.

CSS, JS и медиа

С html страницами мы разобрались, теперь пришло время стилей, JavaScript и медиа. Всё это находится в ".next/static" и нам нужно будет просто искать файлы, запрашиваемые в "example.com/_next/static", в этой директории.

server {
  server_name example.com;

  set $root /var/www/nextjs/.next;
  
  location @proxy {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  location / {
    root $root;
    
    try_files $uri $uri/ $uri/index.html @proxy;
  }

  location /_next/static {
    alias $root/static;

    expires 1y;

    try_files $uri $uri/ =404;
  }

  listen 80;
}

Теперь наш веб-сервер обрабатывает все файлы, которые размещены в ".next/static", и они даже кэшируются браузером клиента на 1 год.

Для удобства в отдельную переменную был выделен путь к root директории, она нам понадобится и дальше, ведь это ещё не всё.

Public

Большая часть работы сделана — страницы, css, JavaScript и меди файлы обрабатываются Nginx'ом, но у нас скорее всего остались файлы в "./public", которые Next.js не сгенерировал, например, "favicon", "manifest" и т.д. Исправим это.

server {
  server_name example.com;

  set $root /var/www/nextjs;

  set $build $root/.next;
  
  location @proxy {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  location @public {
    root $root/public;

    try_files $uri @proxy;
  }

  location / {
    root $build;
    
    try_files $uri $uri/ $uri/index.html @public;
  }

  location /_next/static {
    alias $build/static;

    expires 1y;

    try_files $uri $uri/ =404;
  }

  listen 80;
}

Что изменили:

• Поменяли значение переменной "$root" на "/var/www/nextjs"

• Создали переменную "$build" со значением "$root/.next"

• Добавили блок "location @public", который ищет файлы в "/var/www/nextjs/public", а если не находит, то передаёт обработку блоку "location @proxy"

• В "location /" фоллбэк "@proxy" был заменён на "@public"

• В расположениях "/" и "/_next/static" "$root" был заменён на "$build"

Сравнение

Изначально наш конфиг был таким:

server {
  server_name example.com;

  location / {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  listen 80;
}

И в итоге превратился в такой:

server {
  server_name example.com;

  set $root /var/www/nextjs;

  set $build $root/.next;
  
  location @proxy {
    include proxy_params;
    
    proxy_pass http://127.0.0.1:3000;
  }

  location @public {
    root $root/public;

    try_files $uri @proxy;
  }

  location / {
    root $build;
    
    try_files $uri $uri/ $uri/index.html @public;
  }

  location /_next/static {
    alias $build/static;

    expires 1y;

    try_files $uri $uri/ =404;
  }

  listen 80;
}

Заключение

Настройка Nginx для Next.js приложения оказалась не такой уж и сложной. Мы отделили обработку динамических данных от статичных, облегчив работу Ноде, и даже смогли уменьшить количество запросов к серверу за счёт кэширования в браузере.

При небольших нагрузках вряд ли это даст ощутимый прирост в производительности, но с ростом числа пользователей эффект будет всё более заметным.