Nextjs - How to Build Next.js Application on Docker and Pass API Url

June 03, 2021

Introduction

In this post we will see:

  • How to prepare a docker image for your next.js application
  • Pass API url

Assumption Setup

We have:

  • An API backend to configure
  • Nextauth URL

Challenge

We have to pass URLs at build time, not run time. This is the point I struggled a lot with. So either you are building your Next.js build with docker or not, you need to pass variables at build time.

Code To receive URLs from Environment

First of all your code needs to use URLs from environment.

Whatever API you are calling, you need a base url. Your code needs to use url as below:

process.env.NEXT_PUBLIC_API_URL

# Example GET API

await axios.get(
  `${process.env.NEXT_PUBLIC_API_URL}/emails/count`
)

How to Pass URL from Environment

I have two variables to pass:

  • NEXT_PUBLIC_API_URL
  • NEXTAUTH_URL

From .env.local file

You can either place a file with name env.local and pass the values there.

NEXTAUTH_URL=YOUR_HOST:3000
NEXT_PUBLIC_API_URL=BACKEND_HOST:1337

# Do remember to use your host and port

Use next.config.js

Create a file named next.config.js at the root directory of your Next.js project.

module.exports = {
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337',
    NEXTAUTH_URL: process.env.NEXTAUTH_URL || 'http://localhost:3000',
  },
}

Here, First I’m expecting these variables to come from environment. If not present in environment, I’m usin using the default one. So, those default one will be used during development.

Prepare Docker Image

Lets have a look at docker file:

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

# Rebuild the source code only when needed
FROM node:alpine AS builder

ARG NEXT_PUBLIC_API_URL
ARG NEXTAUTH_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXTAUTH_URL=$NEXTAUTH_URL

WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build && npm install --production --ignore-scripts --prefer-offline

# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN 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 nextjs

EXPOSE 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 ["npm", "start"]

Here, I’m passing those environment variables here as:

ARG NEXT_PUBLIC_API_URL
ARG NEXTAUTH_URL
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXTAUTH_URL=$NEXTAUTH_URL

Build Docker Image

docker build 
  --build-arg NEXT_PUBLIC_API_URL=<YOUR_PUBLIC_HOST> 
  --BUILD-ARG NEXTAUTH_URL=<YOUR_API_BACKEND>
  -t <IMAGE_NAME_YOU_WANT> .

Deployment

I will post about Nginx Load Balancer and docker-compose in next post soon.

javascriptnext.js

Similar Posts

Latest Posts