Deploy NextJS with Dokku in Production - npm

Question

I have set up Dokku and want to deploy my basic NextJs to it. Everything works fine, except for that the application is running in development mode.
When I output the NODE_ENV variable in my JSX, it is first production but changes to development.
const Index = () => (
<div>
<Link href="/about">
<a>About Page</a>
</Link>
{process.env.NODE_ENV}
</div>
That's what I am seeing. The NODE_ENV variable changes during the page load.
package.json:
"scripts": {
"start": "next src",
"build": "next build src"
},
App.json:
{
"scripts": {
"dokku": {
"predeploy": "npm run build"
}
}
}
Procfile:
web: npm start -- --port $PORT
In addition I set two configs for my dokku application:
dokku config:set my-app NPM_CONFIG_PRODUCTION=false
dokku config:set my-app HOST=0.0.0.0 NODE_ENV=production
What am I missing to get it into production mode?

Answer 1

Solved it by setting up an own express server.
package.json
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
app.json
{
"scripts": {
"dokku": {
"predeploy": "npm run build"
}
}
}
Procfile
web: npm start -- --port $PORT

Answer 2

According to this github issue comment you need to have the application listen to the PORT environment variable.
I could not get this to work though. There are examples of how you can get a npm-script to consume environment variables, but I didn't want to go down that road just now. (see this question for more info on that.)
However, I did notice that Next.js listen to port 3000 by default, and dokku uses port 5000 internally, so I got it to work by simply changing the default npm start script to next -p 5000, that is I hardcoded the Next.js app to use port 5000.
This works for now, but I've only tested it with a clean, minimal project, so not sure if there are other blockers down the road.
Also, it seems like Next.js does in fact pick up on env variables from .env files, but that isn't reflected in the port the app is served on for some reason: