Docker deployment in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the Dockerfile to specify the base image for a Next.js app.

NextJS

FROM [1]

Drag options to blanks, or click blank then click option'

Anode:18-alpine

Bpython:3.12

Cubuntu:latest

Dnginx:alpine

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Python or Ubuntu image which lacks Node.js.

Using Nginx as base image which is for serving static files only.

The base image node:18-alpine is a lightweight Node.js image suitable for Next.js apps.

2fill in blank

medium

Complete the Dockerfile command to copy package.json and package-lock.json files.

NextJS

COPY [1] ./

Drag options to blanks, or click blank then click option'

Anode_modules/

Bsrc/

Cpackage*.json

Dpublic/

Attempts:

3 left

💡 Hint

Common Mistakes

Copying the entire src folder instead of package files.

Copying node_modules which should be installed inside the container.

Using package*.json copies both package.json and package-lock.json files needed for installing dependencies.

3fill in blank

hard

Fix the error in the Dockerfile command to install dependencies.

NextJS

RUN npm [1]

Drag options to blanks, or click blank then click option'

Arun

Bstart

Cbuild

Dinstall

Attempts:

3 left

💡 Hint

Common Mistakes

Using npm start which runs the app instead of installing.

Using npm build which is not a valid npm command.

The npm install command installs all dependencies listed in package.json.

4fill in blank

hard

Fill both blanks to expose the correct port and set the command to start the Next.js app.

NextJS

EXPOSE [1]
CMD ["npm", "[2]"]

Drag options to blanks, or click blank then click option'

A3000

Bstart

Cbuild

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Exposing port 8080 which is not default for Next.js.

Using npm build as the start command.

Next.js apps by default run on port 3000, and npm start runs the production server.

5fill in blank

hard

Fill all three blanks to create a Docker Compose service for the Next.js app with build context, port mapping, and environment variable.

NextJS

services:
  web:
    build: [1]
    ports:
      - "[2]:3000"
    environment:
      - NODE_ENV=[3]

Drag options to blanks, or click blank then click option'

A"."

B3000

Cproduction

Ddevelopment

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong build context path.

Mapping wrong ports or setting NODE_ENV to development in production.

The build context is the current directory ".", port 3000 is mapped, and NODE_ENV is set to production for deployment.