javascript - 404 - File or directory not found in Next JS

Question

I am making a next js application.

Deployment works fine in vercel.

For deploying the same project in another server, got help from https://stackoverflow.com/a/63660079/13270726 and used the same instructions in our app.

Deployed the out directory into server using ftp client.

Issue

-> When we enter into http://your-domain.com , it works fine. (Even page refresh also works fine in this page)

-> If we move to about page using the url, http://your-domain.com/about then it also works but on page refresh in the url http://your-domain.com/about results in the error,

-> This page refresh also results in the console error like,

Get http://your-domain.com/about Not found

next.config.js: (With public path)

const config = {
  webpack: (config, { isServer }) => {

    .
    .
    .

    config.devServer = {
      historyApiFallback: true
    }

    config.output.publicPath = "/"

    return config;

  }
}

module.exports = withPlugins(config);

The issue arises in page refresh only or when we manually type the url.. But while we navigate to it first time then the issue is not there.

Any good help would be much appreciated as I am stuck for long time..

Edit:

I have a server.js file and its code look like,

const dotenv = require("dotenv");
// import ENVs from ".env.local" and append to process
dotenv.config({ path: ".env.local" });
const express = require("express");
const address = require("address");
const chalk = require("chalk");

// create express web server instance
const app = express();
// pull out ENVs from process
const { LOCALHOST, PORT } = process.env;
// get the Local IP address
const LOCALIP = address.ip();

// tell express to serve up production assets from the out directory
app.use(express.static("out" + '/'));

app.get('/*', (req, res) => {
  res.send('ok')
});

app.all('*', function(req, res) { 
  res.redirect('/index.html'); 
});

// tell express to listen for incoming connections on the specified PORT
app.listen(PORT, (err) => {
  if (!err) {
    // log the LOCALHOST and LOCALIP addresses where the app is running
    console.log(
      `
${chalk.rgb(7, 54, 66).bgRgb(38, 139, 210)(" I ")} ${chalk.blue(
        "Application is running at"
      )} ${chalk.rgb(235, 220, 52).bold(LOCALHOST)} ${chalk.blue(
        "or"
      )} ${chalk.rgb(235, 220, 52).bold(`http://${LOCALIP}:${PORT}`)}
`
    );
  } else {
    console.err(`
Unable to start server: ${err}`);
  }
});

question from:https://stackoverflow.com/questions/65941810/404-file-or-directory-not-found-in-next-js

Answer 1

Waitting for answers