Multiple environment files in a Next.js app (optional + with docker)

NEXT_PUBLIC_API=http://localhost:9000/api

Create environment files

  • local
  • testing
  • prod
env /.env.local.env.prod.env.testing

Install packages

Modify Next.config.js

require('dotenv').config()
const webpack = require('webpack')
module.exports = {
webpack: (config) => {
config.plugins.push(
new webpack.EnvironmentPlugin(process.env)
)
return config
}
}

Add build scripts

"scripts": {
"dev": "env-cmd -f env/.env.local next dev",
"build-dev": "next build",
"build": "next build",
"start": "next start",
"lint": "eslint --fix --ext .js .",
"build:prod": "env-cmd -f env/.env.prod yarn build",
"build:test": "env-cmd -f env/.env.test yarn build",
"build:local": "env-cmd -f env/.env.local yarn build"

},
yarn dev

Basic Usage

yarn build:prod 
yarn build:test
yarn start

Docker usage

# Install dependencies only when needed
FROM node:16.8.0-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
# Open issue https://github.com/facebook/create-react-app/issues/11565
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json ./
RUN yarn install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:16.8.0-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
ARG BUILDCOMMAND=build:local-kb
RUN yarn $BUILDCOMMAND && yarn install --production --ignore-scripts --prefer-offline
# Production image, copy all the files and run next
FROM node:16.8.0-alpine AS runner
WORKDIR /app
ENV NODE_ENV productionRUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
USER nextjsEXPOSE 3000# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1
CMD ["yarn", "start"]
docker build -t next-app --build-arg BUILDCOMMAND=build:prod --no-cache .
docker run -p 3000:3000 next-app

--

--

--

I am just a web developer who loves writing, teaching and indie rock music :) My teaching style is playful and fun. At least I hope, lol.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Front-end Frameworks Wrapper

My experience with PWA and Electron. Which is better? Which one should I use?

10 Days of JavaScript HackerRank Problem Solve

Achieving bulk approval of records in Salesforce

How to build a simple URL shortener with just HTML and JavaScript

React Native for Mobile App Development

How to build an Augmented Reality XR App with Unity and ARCore to create Augmented Images

Remove Rich Text Formatting in Flows

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jumanah Al Asadi

Jumanah Al Asadi

I am just a web developer who loves writing, teaching and indie rock music :) My teaching style is playful and fun. At least I hope, lol.

More from Medium

How to Build NodeJS REST API with Express and PostgreSQL — Typescript Version

GraphQL, Node.js, and MongoDB — Made Easy with NestJS and Mongoose

NestJS: Authentication With JWT and Postgres (2022)

NestJS Authenfication API

Configuring CI/CD | Building an NPM Package with TypeScript