what is the best way to deploy nextjs app very first time and after than when a re-deployment is required? - next.js

Question

I have a developed a sample application in nextjs and deployed this sample application using npm run build command.
I am following this (https://nextjs.org/docs/advanced-features/custom-server) article for a custom server deployment.
I have created a server.js file for custom server at the root level of build directory.
and modified the following in package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
and next.config.js
module.exports = {
reactStrictMode: true,
};
const path = require("path");
module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
env: {
DOM: process.env.DOM,
SERDOM: process.env.SERDOM,
PAPI: process.env.PAPI,
UAPI: process.env.UAPI,
PAEXIST: process.env.PAEXIST,
USEREXIST: process.env.USEREXIST
},
};
Now after that , I am a bit confused. Should I give the path of server.js using pm2 ?
server.js is using port 3000 and nextjs frontend app is using 3001.
Initially my deployment was not working and throwing 404 error but now it is working but here is some issue in it.
When I run the npm run build command to generate a new build/release and try to deploy again then my nextjs deployed app is not displaying the new changes.
Why ?
Does it get from somewhere else or from cached objects ?
How can I enable/display the updated deployment to my end user ?
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
================================package.json================================
{
"name": "New demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
},
"proxy": "http://localhost:3008"
}

Answer 1

Try like this
"scripts": {
"web:local": "env-cmd -f environments/.env.local node server.js",
"dev": "next dev",
"build": "next build",
"start": "next start"
},
where environments/.env.local is your local settins and some private info (you need to create environments folder and .env.local file). Server.js is your file, code example below
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
// these are keys to run your localhost with https protocol, you can // if you dont need it
const httpsOptions = {
key: fs.readFileSync('./environments/key.pem'),
cert: fs.readFileSync('./environments/cert.pem')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});
Then you run your application with npm run web:local
Why ?
Because you did a build, it's not dynamically updated
Does it get from somewhere else or from cached objects ?
No, its a "built" of your project
Moreover, what is the best way to deploy nextjs app first time and after then latest deployment ?
You upload your code to git, you link git to Vercel. In vercel you need to also add environment variables. Don't forget also, you need to.gitignore /environments folder!