Next Js home page hosted in cloudways server showing 404 error, all other page working correctly

Question

We have hosted next JS app in Cloudways server via pm2. The homepage is working properly in localhost (both build/production and development) but showing 404 when deployed in cloudways server. There is an error on dev tools console --- Failed to load resource: the server responded with a status of 404 (). When i check the network in dev tools, im getting this:

Headers

All other pages working correctly and static files are working perfectly in server, it is downloaded correctly in right path by the browser.

The .htacess file is as below:

# Redirect traffic to your port 3000
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)?$ http://127.0.0.1:3000/$1 [P,L]

The package json is as below:

{
  "name": "appname",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.2.4",
    "@types/node": "18.15.10",
    "@types/react": "18.0.30",
    "@types/react-dom": "18.0.11",
    "axios": "^1.3.4",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swr": "^2.1.2",
    "typescript": "5.0.2"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.16"
  }
}

It seems the server can't find the index.html or index.js. (hunch)

Kindly let us know what changes has to be done to make next JS app show index.js page Much appreciated.

I tried to create an index.html inside .next folder, in public_folder but still getting 404 page on homepage.