为什么 Next.js 的编译指示器出现在我的生产构建中？

Question

I noticed after building and deploying a Next.js website that the black compile indicator still shows up in the bottom-right of my browser like it would locally.

This indicator: https://i.stack.imgur.com/FVWEU.gif

On Next.js's website:

This indicator is only present in development mode and will not appear when building and running the app in production mode.

Even locally when I run yarn build and yarn start , the indicator displays while the page loads.

During the build process, it says:

Creating an optimized production build Done in 20.89s.

My concern isn't so much that the indicator is displaying, because I can disable it. I'm concerned that I'm not getting an optimized build since something is displaying that should only be displaying in development mode.

Note: I can't share a link to the website as it is work-related.

Has anybody seen this issue before?

Thanks in advance!

Technical information:

Next.js Version 12.1.1

Dockerfile:

FROM node:16.13.0-alpine

# Install packages.
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install

# Copy all other files.
COPY . .

# Build the app.
RUN yarn build

# USER node
EXPOSE 3003
CMD ["yarn", "start"]

package.json (scripts block):

"scripts": {
    "dev": "node ssr-server.js",
    "build": "next build",
    "test": "node_modules/.bin/jest",
    "test:coverage": "node_modules/.bin/jest --coverage",
    "test:watch": "node_modules/.bin/jest --watch",
    "start": "node ssr-server.js"
},

Answer 1

In the custom server JavaScript file, there should be a line that check if the environment is development or production:

const dev = process.env.NODE_ENV !== 'production'

update the start script in package.json to set that environment variable:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node ssr-server.js"
}