assetPrefix not applied correctly when using Docker

[tjd985]

Summary

I'm using Next.js version 14.2.16

When I run yarn build:loc and yarn start:loc locally on my machine, everything works fine.
all files, including CSS and JS, are correctly loaded with the assetPrefix from env that NEXT_PUBLIC_STATIC_HOST

However, when I build the project using Docker and run it, some files (like CSS and some JS chunks) are not loaded with the correct assetPrefix. I’m not sure why this is happening.

Here’s some context

// next.config.js
const nextConfigWithBundleAnalyzer = withBundleAnalyzer({
  reactStrictMode: false,
  generateBuildId: () => nextBuildId({ dir: __dirname }),
  assetPrefix: process.env.NEXT_PUBLIC_STATIC_HOST,
  compress: true,
  // ...
});

// .env.loc
NEXT_PUBLIC_STATIC_HOST=<my cdn url here>

// package.json scripts
"scripts": {
  "build:loc": "env-cmd -f .env.loc next build",
  "start:loc": "env-cmd -f .env.loc next start"
}

# Dockerfile (simplified)
FROM node:18-alpine AS base

FROM base AS builder
WORKDIR /app
COPY package.json yarn.lock build.sh ./
ENV ACTION="yarn install --frozen-lockfile"
RUN sh build.sh

COPY . .

ENV ACTION="yarn build:loc"
RUN sh build.sh

FROM base AS runner
WORKDIR /app

COPY --from=builder /app/node_modules /app/node_modules
COPY --from=builder /app/.next /app/.next
COPY --from=builder /app/public /app/public
COPY --from=deps /app/package.json /app/package.json
COPY --from=deps /app/.env.loc /app/.env.loc

EXPOSE 3000
CMD yarn start:loc

# build.sh
$ACTION

Does anyone know why assetPrefix might not be applied properly in the Docker environment even though it works locally?
Thanks in advance!

Additional information

No response

Example

No response

[deepaucksharma]

Hi! I've seen this error before... . Here's a comprehensive solution:

Quick Fix

First, try clearing your cache and reinstalling:

# Clear everything
rm -rf node_modules .next
rm package-lock.json  # or yarn.lock/pnpm-lock.yaml

# Reinstall
npm install

Common Causes & Solutions

1. Missing or Corrupted Next.js Installation

# Verify Next.js is installed
npm list next

# Reinstall if needed
npm install next@latest react@latest react-dom@latest

2. Turbopack Compatibility Issue

If the error persists, try running without Turbopack while we troubleshoot:

next dev  # instead of next dev --turbo

3. Package Manager Conflicts

Make sure you're using only ONE package manager:

# If using npm
rm yarn.lock pnpm-lock.yaml

# If using yarn
rm package-lock.json pnpm-lock.yaml

# If using pnpm
rm package-lock.json yarn.lock

4. Node Version

Ensure you're using Node.js 18.17 or later:

node --version

5. Monorepo Setup

If you're in a monorepo, ensure Next.js is properly hoisted or installed in your workspace:

# For npm workspaces
npm install next@latest -w your-app-name

# For yarn workspaces
yarn workspace your-app-name add next@latest

Still Having Issues?

Please share:

1. Your package.json dependencies
2. Node.js version (node --version)
3. Package manager and version
4. Whether you're using a monorepo

This will help in coming up with more specific solution. Hope this helps!

[icyJoseph]

Naive follow up, but is NEXT_PUBLIC_STATIC_HOST available during build/run time in the docker container?

[tjd985]

@icyJoseph
Is it not possible to use .env during the Docker build runtime?
I'm also curious how some chunks ended up being built with a prefix.
If it's truly not usable, shouldn't none of them have the prefix at all? 🥲

[deepaucksharma]

you're right @icyJoseph here is quick follow up on last solution -

NEXT_PUBLIC_STATIC_HOST isn't available during Docker build when Next.js compiles asset URLs.

Solution: Pass Build Args Explicitly

1. Update Dockerfile

FROM node:18-alpine AS builder
WORKDIR /app

# Copy package files
COPY package*.json ./
RUN yarn install --frozen-lockfile

# Copy source including .env.loc
COPY . .

# CRITICAL: Set build-time env var explicitly
ARG NEXT_PUBLIC_STATIC_HOST
ENV NEXT_PUBLIC_STATIC_HOST=$NEXT_PUBLIC_STATIC_HOST

# Build with the env var available
RUN yarn build:loc

# Runtime stage
FROM node:18-alpine AS runner
WORKDIR /app

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/.env.loc ./.env.loc

EXPOSE 3000
CMD ["yarn", "start:loc"]

2. Build Command

# Extract value from .env.loc and pass as build arg
export NEXT_PUBLIC_STATIC_HOST=$(grep NEXT_PUBLIC_STATIC_HOST .env.loc | cut -d '=' -f2)
docker build --build-arg NEXT_PUBLIC_STATIC_HOST=$NEXT_PUBLIC_STATIC_HOST -t your-app .

3. Verify It's Working

Add this to your next.config.js to debug:

console.log('Building with assetPrefix:', process.env.NEXT_PUBLIC_STATIC_HOST);

module.exports = {
  assetPrefix: process.env.NEXT_PUBLIC_STATIC_HOST || '',
  // your other config...
}

Alternative: Load .env.loc During Build

If you prefer using env-cmd as-is:

# In builder stage, ensure env-cmd loads the file
RUN npx env-cmd -f .env.loc node -e "console.log('NEXT_PUBLIC_STATIC_HOST:', process.env.NEXT_PUBLIC_STATIC_HOST)"
RUN npx env-cmd -f .env.loc yarn build

Quick Test

After building, check if assets have the prefix:

docker run --rm your-app grep -r "your-cdn-url" .next/

This ensures the CDN URL is baked into the build output.

[tjd985]

@deepaucksharma
I'm not using 'standalone' as the output value in next.config.js.
I'm using the default build output.

When I set the output to 'standalone' and build with Docker, I can confirm that all necessary files are properly bundled.

However, I'm not sure why this issue occurs when I don't use the standalone output.

Even when I set my CDN URL directly as a string in assetPrefix instead of using NEXT_PUBLIC_STATIC_HOST, the same issue still happens. 🥲

[Netail]

We use a bash script before start up to replace a placeholder text in nextjs output, as explained here; #18301.

Do make sure it's something VERY VERY distinguishable, so you don't replace anything accidentally