Nginx Configuration: Proxy Next.js Frontend on Port 3000 and Node.js Backend on Port 8008

I'm facing an issue with my project setup where I use Next.js for the frontend and Node.js for the backend. My Next.js application runs on port 3000 and the backend runs on port 8008. I want to configure Nginx so that when users enter my domain name (without specifying a port), they are directed to the Next.js frontend. However, when I navigate to my domain, I see the default Nginx welcome page.

Here's my current setup:

Domain Name:

example.com

Next.js - .env.local:

NEXT_PUBLIC_BASE_URL="http://example.com:8008/api"

Node.js - .env:

PORT=8008ORIGIN_URL="http://example.com:3000"

Nginx Configuration - /etc/nginx/sites-available/example.com:

server {    listen 80;    server_name example.com www.example.com;    # Proxy requests to the Next.js application    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_cache_bypass $http_upgrade;    }    # Proxy requests to the Node.js backend    location /api/ {        proxy_pass http://localhost:8008;        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;    }}

When I visit http://example.com, I see the following message instead of my Next.js application:

Welcome to nginx!If you see this page, the nginx web server is successfully installed and working. Further configuration is required.For online documentation and support please refer to nginx.org.Commercial support is available at nginx.com.Thank you for using nginx.

I've tried multiple configurations but nothing seems to work. Can anyone help me identify what I might be doing wrong or what needs to be adjusted in my Nginx configuration to make this setup work?

Thank you!