Next.js 12 Output File Tracing Fails to Build

Current Behavior

• create a new nx workspace w/ a next.js app
• turn on next.js output file tracing
• run nx build --prod
• build fails w/ the error message saying dist/apps/haha/.next/standalone/apps/haha/server.js doesn’t exist (it doesn’t)

Expected Behavior

The standalone folder should contain a server.js file.

Steps to Reproduce

I’ve created a repro repo here. Clone & run yarn nx build --prod to see error message.

Failure Logs

ENOENT: no such file or directory, open '/nx_next_standalone_repro/dist/apps/haha/.next/standalone/apps/haha/server.js'

Environment

Output of next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
    Binaries:
      Node: 16.13.1
      npm: 8.1.2
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.1.0
      react: 17.0.2
      react-dom: 17.0.2

Output of nx report

   Node : 16.13.1
   OS   : darwin arm64
   yarn : 1.22.17
   
   nx : 13.8.2
   @nrwl/angular : undefined
   @nrwl/cli : 13.8.2
   @nrwl/cypress : 13.8.2
   @nrwl/detox : undefined
   @nrwl/devkit : 13.8.2
   @nrwl/eslint-plugin-nx : 13.8.2
   @nrwl/express : undefined
   @nrwl/jest : 13.8.2
   @nrwl/js : 13.8.2
   @nrwl/linter : 13.8.2
   @nrwl/nest : undefined
   @nrwl/next : 13.8.2
   @nrwl/node : undefined
   @nrwl/nx-cloud : undefined
   @nrwl/react : 13.8.2
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.8.2
   @nrwl/tao : 13.8.2
   @nrwl/web : 13.8.2
   @nrwl/workspace : 13.8.2
   typescript : 4.5.5
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:

[Yizhachok]

Just don’t ask how I investigated this and how much time I spend to find out how to fix this. ⚠️ WARNING ⚠️ Next text for people who believe in magic, skeptics, please stop read this text right now. I warned you.

Steps to get working repo for standalone Next.js server with build using NX CLI.

Init example workspace (or use your own)

1. Run npx create-nx-workspace@latest --preset=next (tested on v14.1.9 workspace)
2. Answers to questions: ✔ Workspace name (e.g., org name): next-test ✔ Application name: site ✔ Default stylesheet format: scss
3. Go to next.config.js file and add to config:

experimental: {
    outputStandalone: true,
    outputFileTracingRoot: path.join(__dirname, "../../")
}

Preparation finished, now let’s make real magic

Go to pages/index.tsx (or any page file) and add this lines (don’t ask why, this is MAGIC):

import path from 'path';
path.resolve('./next.config.js');

Really can be any js file that can be resolved from current location (even empty). This code enough to insert only once.

Show magic to the world

Run npm run build. That’s it! No errors!

Bonus

This is a VERY SIMPLE Docker config that show how to work with this build.

FROM node:16-alpine AS builder
RUN apk add --no-cache libc6-compat python3 make g++
WORKDIR /build
COPY . .
RUN npm i && npm run build


FROM node:16-alpine AS runner
ARG APP=site
WORKDIR /app

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

COPY --from=builder --chown=nextjs:nodejs /build/dist/apps/${APP}/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /build/dist/apps/${APP}/.next/static ./dist/apps/${APP}/.next/static
COPY --from=builder --chown=nextjs:nodejs /build/dist/apps/${APP}/public ./apps/${APP}/public

USER nextjs

EXPOSE 3000

ENV NODE_ENV=production
ENV APP_PATH=apps/${APP}/server.js
ENV PORT 3000

CMD node $APP_PATH

Thanks to @bboyz269 for working example, from his repository I found the issue why build didn’t work on clean project. His repo works because of next-i18next lib code.

[always-maap]

I post mine maybe it helps

experimental: {
    outputStandalone: true,
    outputFileTracingRoot: path.join(__dirname, '../../'),
  },

# Dockerfile/zoomit-editorial/Dockerfile


FROM docker-repo.url.com/node:v-alpine

COPY dist/apps/zoomit-editorial/.next/standalone app/
# TODO: serve with CDN
COPY dist/apps/zoomit-editorial/public/ app/apps/zoomit-editorial/public/
COPY dist/apps/zoomit-editorial/.next/static app/dist/apps/zoomit-editorial/.next/static/

WORKDIR /app

ENV NODE_ENV production
ENV PORT 4200

CMD ["node", "apps/zoomit-editorial/server.js"]