Next jS Dockerize for Production With Standalone Mode

Pada tutorial kali ini, kita akan belajar bagaimana melakukan Dockerize aplikasi Next JS dengan mode Standalone.

 

Apa itu mode standalone?

Mode standalone adalah proses build next js dimana akan mengoptimalkan hasil build dengan membuang node_modules dan hanya menggunakan library yang dibutuhkan saja dan di convert menjadi static file.

Dengan menggunakan standalone ukuran aplikasi akan menjadi lebih kecil sampai 80%

Jika kita ingin menjalankan aplikasi Next JS kita sebagai container maka menggunakan mode standalone akan sangat membantu mengurangi size dari container.

 

Install Next JS

Kita akan menginstall Next JS terlebih dahulu, jalankan perintah dibawah dan buat nama project misalnya "next-standalone"

 

shell
npx create-next-app@latest

Lalu masuk kedalam folder "next-standalone" kemudian edit file next.config.js tambahkan output

 

javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
};

export default nextConfig;

Kemudian buat file Dockerfile

shell
FROM node:18-alpine AS base

 
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
# Set working directory
WORKDIR /app
COPY . .
 
# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/package.json .
RUN yarn install
 
# Build the project
COPY --from=builder /app/ .
RUN yarn build
 
FROM base AS runner
WORKDIR /app
 
 
# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/next.config.mjs .
COPY --from=installer /app/package.json .
# COPY --from=installer /app/.env.production .
 
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=installer --chown=nextjs:nodejs /app/public ./public

EXPOSE 3000

CMD node server.js 

Kemudian jalankan perintah

shell
docker build -t next-standalone .

Setelah berhasil, kemudian testing dengan menjalankan perintah

shell
docker run -it --rm -p 3000:3000 next-standalone

Kemudian akses broswer http://localhost:3000

Berikut ini perbandingan ukuran container jika tanpa mode standalalone dan menggunakan mode standalone:

shell
| No Standalone  |  With Standalone Mode |
| 500MB  |  100MB |

Ukuran diatas hanya perbandingan next js tanpa menggunakan library tambahan seperti Chakra UI, Taildwind CSS