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"
},
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"
}