Запуск next-js на сервере Nginx приводит к ошибке 404 на ресурсах и ссылках.

Вопрос или проблема

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html/;
        index index.html index.htm index.nginx-debian.html;

        server_name a.com;
        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_cache_bypass $http_upgrade;
                try_files $uri $uri/ =404;
        }

}

`       location /_next/static/ {
                alias /var/www/html/dist/static/;
                expires 365d;
                access_log off;
        }
`

**_next/data возвращает 404 (NGINX)**

Ответ или решение

Проблема с 404 ошибками на статических ресурсах и ссылках при хостинге приложения Next.js на сервере Nginx часто связана с неправильной конфигурацией проксирования и маршрутизации. Рассмотрим детально, как правильно настроить Nginx для работы с приложением Next.js.

Актуальная конфигурация Nginx

На основе вашего предоставленного кода конфигурации Nginx, можно выделить несколько ключевых моментов:

1. Проблемы с маршрутизацией: Когда вы обращаетесь к статическим ресурсам, таким как изображения, стили и скрипты, правильный путь к ним не определяется, что приводит к ошибке 404.

2. Отсутствие правильной обработки _next/: Next.js использует специальный префикс для статических ресурсов и маршрутов, который необходимо корректно обрабатывать в конфигурации Nginx.

Шаги для исправления конфигурации

1. Обновление основного блока server

Убедитесь, что вы правильно определили корневую директорию и что ваши статические ресурсы доступны для Nginx:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name a.com;

    location / {
        proxy_pass http://localhost:3000; # Проксируем на сервер Next.js
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;

        # Удаляем строку с try_files, так как она конфликтует с прокси
    }

    # Добавляем правильную маршрутизацию для статических файлов Next.js
    location /_next/ {
        proxy_pass http://localhost:3000/_next/; # Проксируем запросы на _next
    }

    location /api/ {
        proxy_pass http://localhost:3000/api/; # Проксируем запросы на API (если есть)
    }

    location /static/ {
        alias /var/www/html/dist/static/; # Используется, если у вас есть статические файлы
        expires 365d;
        access_log off;
    }

    # Дополнительная настройка (по желанию)
    location ~* \.(?:manifest|json|xml|html)$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }
}

2. Причины появления 404 ошибок

• 404 на _next/data: Если у вас возникают ошибки 404 при попытке доступа к /next/data, это может быть связано с отсутствием корректной прокси-настройки для данной директории. Убедитесь, что все запросы к этому префиксу перенаправляются на сервер Next.js без изменений.

• Настройки кэша: Если вы используете кэширование, во избежание кэширования старых файлов, вы можете захотеть настроить заголовки кэширования так, чтобы статические файлы обновлялись регулярно.

3. Запуск приложения

Убедитесь, что ваше приложение Next.js запущено правильно (например, используя pm2) и доступно на порту 3000:

pm2 start npm --name "next-app" -- start

Заключение

После внесения указанных изменений в конфигурацию Nginx, перезагрузите сервер:

sudo systemctl reload nginx

Или, если вы не используете systemd:

sudo service nginx reload

Проверяйте логи Nginx и вашего приложения Next.js на наличие других ошибок. Это поможет вам точно определить, если что-то не работает как ожидается. Правильная конфигурация Nginx облегчает доступ к ресурсам вашего приложения и обеспечивает его корректную работу.