4

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,

enter image description here

-> 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(
      `\n${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}`)}\n`
    );
  } else {
    console.err(`\nUnable to start server: ${err}`);
  }
});
Undefined
  • 851
  • 5
  • 20
  • 48
  • 2
    Hi, I've seen similar issues when people deploy their app onto Heroku and I think it's typically resolved with a modification to *a* `htaccess` file. Basically React apps are SPA that manipulate the address bar to simulate nested routes. When you navigate directly to a nested URL the server doesn't have an HTML file there to load, hence the 404 error, React isn't running. This is why if you start as the root app URL, then navigate via the app to the nested path it works. – Drew Reese Jan 28 '21 at 17:53
  • @DrewReese, Thanks bro for your detailed explanation.. Could you give some points of where the ```htaccess``` file will be there? Should we need to do the changes inside our next js application or in server? – Undefined Jan 29 '21 at 03:25
  • Did you manage to fix this? If so, how did you do it? Thanks in advance – filipe Sep 15 '21 at 12:29

0 Answers0