Next.js Standalone Output

[patdx]

I'm not exactly sure how to fit it into the Nx system, but something to watch is Next.js's recently added experimental outputStandalone option:

vercel/next.js@eb7b401

For anyone trying to serve a self-hosted Next.js app, one useful point is the next.config.js seems to be evaluated (I assume with the PHASE_PRODUCTION_SERVER option) and baked directly into the generated server startup script. The compiled config can be found at the config property of the build output file .next/required-server-files.json.

This removes the need for copying next.config.js directly into the build output or production-time dependencies on build-time config plugins like withNx from @nrwl/nx, etc, and I guess is more similar to how Next.js apps get deployed inside of Vercel's own system too.

This has been one point of pain for me and I think for others too (see #5473 #6985 #6886 #7448)

It would be cool if @nrwl/next could take inspiration from this to precompile the next config somehow. In the long term, it would also be nice to have built in support for using their new file trace features but maybe it is better to wait for things to stabilize on Vercel's side first.

[borisilic-ap]

Any updates on this? output: standalone has become an official part of next.config.js and it would be very useful to be able to use it easily. It's quite difficult to impossible to get it working at this stage.

[kasir-barati]

Any working example @borisilic-ap? To tell the truth I am pretty confused with how nx and nextjs are working next to each other since my build result is a complete mess, I have my root package.json in the dist directory. tons of files, and even dist inside dist. I hope someone could create a working example, especially a dockerized one 👀

[aevarOrigo]

@kasir-barati you could try this after your build:

WORKDIR /app

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

COPY --from=builder --chown=nextjs:nodejs /app/builder/dist/apps/*your project*/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/builder/dist/apps/*your project*/.next/static ./dist/apps/*your project*/.next/static
COPY --from=builder --chown=nextjs:nodejs /app/builder/apps/*your project*/public ./apps/*your project*/public

replacing your project with the name of your app

/app/builder is my workdir where i built the output in an earlier step

[jubayeramb]

@kasir-barati any luck?

[kasir-barati]

Hey @jubayeramb,

Glad to see someone actually asked me about it here. Yes, here is a working example of NextJS + Nx. Please do not hesitate to reach me in case something was not as clear as it should be so that I can document it well for future references.

Oh, BTW I really appreciate it if you find it useful to give it a ⭐ on GH.