reactjsnginxnext.jsnginx-reverse-proxynginx-config

NextJS 500 internal server error on deployed website. But build works PERFECTLY on local

Build is working perfectly on my local PC with pm2, no errors at all. Every page loads perfectly, there are no 404 or 500 errors in fetching files. It's great! This is EXACTLY how I want it to run.

But when I try and deploy this on Ubuntu with pm2 I am getting two sets of errors:

I'll put screenshots here:

https://i.sstatic.net/3XybJ.png

Written form:

 Script_app-a44cfb7405f734c3.js

 Script_buildManifest.js

 Script_ssgManifest.js

 Script_middlewareManifest.js

(And others) all are giving me a 500 Internal Server Error no matter what I do.

Attempted Solutions

I've tried many approaches and all of them end with this error/failure when I am navigating to my deployed website.

I've tried this in different folders, I've tried it with a host of different commands. I am completely out of ideas and I've uploaded and tried to get my files on there and install packages and more.

Nginx error?

This might be nginx error? But the nginx settings work perfectly fine for a brand new "npx create-next-app@latest" Following this exact tutorial to the letter: https://www.youtube.com/watch?v=x6ci2iCckWc&t=658s&ab_channel=DigitalCEO

My nginx file

"server {
        server_name specialservername.com;

        gzip on;
        gzip_proxied any;
        gzip_types application/javascript application/x-javascript text/css text/javascript;
        gzip_comp_level 5;
        gzip_buffers 16 8k;
        gzip_min_length 256;

        location /_next/static/ {
                alias /var/www/frontend/.next/static/;
                expires 365d;
                access_log off;
        }

#EDITS
   location ~ ^/_next/static/(.*)$ {
      root /.next;
      try_files "/static/$1" "/server/static/o$1" @proxy_pass;
   }


#END EDITS


        location / {
                proxy_pass http://127.0.0.1:3000; #change to 3001 for second app, but make sure second nextjs app starts on new port in packages.json "start": "next start -p 3001",
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                add_header Access-Control-Allow-Origin *;
        }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/specialservername.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/specialservername.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}

server {
    if ($host =specialservername.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        server_name specialservername.com;
    return 404; # managed by Certbot


}"

What I was Expecting

The NextJS build to be deployed on this server no different than it is on my local machine. On my local machine it's BEAUTIFUL!

Solution

  • If you're seeing an "Internal Server Error" when trying to access your Next.js application on Ubuntu with nginx, it's likely that there's an issue with your configuration.

    Here are a few things you can try:

    Check your nginx error logs: Look in your nginx error logs (typically located in /var/log/nginx/error.log) for any error messages that might indicate what's causing the issue.

    Check your Next.js logs: You should also check your Next.js logs (usually located in the .next directory of your application) for any error messages that might indicate what's causing the issue.

    Check your Next.js configuration: Make sure your Next.js configuration is set up correctly for production deployment. You should make sure that your next.config.js file has the necessary settings for production deployment, such as setting target: 'server', configuring your build options, and setting your asset prefix if necessary.

    Check your environment variables: Make sure any environment variables that your application depends on are set correctly on your Ubuntu server.

    Check for permission: Make sure file, build files on server has enough permissions.

    Also, if everything from above works fine, try dockerizing your application with nginx and run on local, then simply mimic the same on server(ubuntu) as that would definitely give you some clue.

    And...lastly, don't panic. 😃