Client only project deployment using Docker and nginx

[vikraman-boominathan]

I have built a client side only project using next js. I am using docker and nginx to build and run it .
The problem is that while it is being built and is running, only the index page is being rendered.
If I try to navigate to other pages, it shows 403 forbidden from nginx.
I don't know what I am doing wrong. Please help me with it.
I am sharing the config files down here.

// Docker File

FROM node:18-alpine AS builder
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json  ./

RUN  npm ci
  
COPY . .

RUN  npm run build


FROM nginx:alpine AS runner
WORKDIR /usr/share/nginx/html


COPY --from=builder /app/.next/standalone/.next/server/app .
COPY --from=builder /app/.next/static ./_next/static


EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

// nginx.conf

worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;

        # Serve Next.js static files
        location /_next/ {
            alias /usr/share/nginx/html/.next/;
            expires 1y;
            access_log off;
        }

        # Serve public assets
        location /public/ {
            alias /usr/share/nginx/html/public/;
            expires 1y;
            access_log off;
        }

        # Serve Next.js pages (standalone or static export)
        location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ /index.html;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }
    }
}

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "standalone",
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true
  }
};

export default nextConfig;