Nextjs 15 deployment fails

JavaScript
1

I am trying to start a new nextjs 15 project. I just ran the npx create-next-app@latest to initialize my project. But on running fly launch, it fails at building the docker image:

==> Building image
==> Building image with Depot
--> build:  (​)
[+] Building 18.4s (12/16)                                                                                    
 => [internal] load build definition from Dockerfile                                                     0.3s
 => => transferring dockerfile: 1.01kB                                                                   0.3s
 => resolve image config for docker-image://docker.io/docker/dockerfile:1                                1.8s
 => CACHED docker-image://docker.io/docker/dockerfile:1@sha256:93bfd3b68c109427185cd78b4779fc82b484b0b7  0.0s
 => => resolve docker.io/docker/dockerfile:1@sha256:93bfd3b68c109427185cd78b4779fc82b484b0b7618e36d0f10  0.0s
 => [internal] load build definition from Dockerfile                                                     0.0s
 => => Deduplicating step ID [internal] load build definition from Dockerfile, another build is calcula  0.0s
 => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 5)                           0.0s
 => WARN: FromAsCasing: 'as' and 'FROM' keywords' casing do not match (line 17)                          0.0s
 => [internal] load metadata for docker.io/library/node:20.10.0-slim                                     0.9s
 => [internal] load .dockerignore                                                                        0.3s
 => => transferring context: 559B                                                                        0.3s
 => [internal] load build context                                                                        0.6s
 => => transferring context: 349.94kB                                                                    0.6s
 => [base 1/2] FROM docker.io/library/node:20.10.0-slim@sha256:5c714c3e90f66a2cbfa266b90a4d7adcd63453cd  0.0s
 => => resolve docker.io/library/node:20.10.0-slim@sha256:5c714c3e90f66a2cbfa266b90a4d7adcd63453cd730aa  0.0s
 => CACHED [base 2/2] WORKDIR /app                                                                       0.0s
 => CACHED [build 1/6] RUN apt-get update -qq &&     apt-get install --no-install-recommends -y build-e  0.0s
 => [build 2/6] COPY package-lock.json package.json ./                                                   0.0s
 => ERROR [build 3/6] RUN npm ci --include=dev                                                          
------                                                                                                        
 > [build 3/6] RUN npm ci --include=dev:                                                                      
3.731 npm WARN tar TAR_BAD_ARCHIVE: Unrecognized archive format                                               
14.07 npm notice                                                                                              
14.07 npm notice New major version of npm available! 10.2.3 -> 11.0.0
14.07 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v11.0.0>
14.07 npm notice Run `npm install -g npm@11.0.0` to update!
14.07 npm notice 
14.07 npm ERR! code TAR_BAD_ARCHIVE
14.07 npm ERR! TAR_BAD_ARCHIVE: Unrecognized archive format
14.07 
14.07 npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-12-17T06_03_35_592Z-debug-0.log
2

So, I fixed this by replacing the default npm registry with the mirror. I think some caching issue is there in fly.

Added this to my docker file where it ran the npm ci to fix it.

Also, replaced the docker image that fly cli created with the one from the nextjs docker example. And set the nextjs config to include output: "standalone"

RUN npm config set registry https://registry.npmmirror.com && npm ci

Here is the full changes:

docker file:

# syntax=docker.io/docker/dockerfile:1

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base 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

# Install dependencies based on the preferred package manager
COPY package.json package-lock.json .npmrc* ./
RUN npm config set registry https://registry.npmmirror.com && npm ci


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# 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 during the build.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

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

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "standalone",
};

export default nextConfig;
3

This was actually an upstream issue in the NPM registry affecting downloads from some regions (India mainly), see here for more details. It’s since been fixed by them.

  • Daniel
1 Like