outputStandalone with custom server.js

[blackmann]

How to setup experimental outputStandalone with custom server.js? It appears, the server.js included in the build is what comes from nextjs and not mine.

[thibautsabot]

Hello.

What is the server.js you are talking about?
outputStandalone has to be inside next.config.js

[blackmann]

I’m talking about this: https://nextjs.org/docs/advanced-features/custom-server

If you happen to implement a custom server, output standalone doesn’t use your custom server. Or say, there’s no guide on how to use a custom server with standalone

[nemanjam]

I was about to open same topic. I am using custom server similar to official example, will outputStandalone work with this server?

https://github.com/vercel/next.js/tree/canary/examples/custom-server-typescript

[richardscarrott]

@blackmann did you ever figure this out? I'm guessing you may have to just copy your server into the standalone directory manually?

[sladg]

Yeah, pretty much.
I need custom server just in production, so I develop without it, once build is done, I manually copy bundled custom server (using esbuild so it's single file with all dependencies inside).

[PsyGik]

@sladg do you have a min example repo on how you did that? I tried esbuild to bundle all dependencies, but when starting the server with node .next/standalone/custom-server.js, it just exits without any error. I'm kinda stuck at this point now.

[sladg]

Feel free to check https://www.npmjs.com/package/@sladg/nextjs-lambda there is a scripts/pack-nextjs.sh that should give you more insight

[marko-hologram]

Just doing this doesn't work for me. I get an error saying Couldn't find a "pages" directory. Please create one under the project root.

Then when I copy pages directory to standalone directory, I run into other issues because something from my next.config.js isn't present in the standalone output. It's regarding some webpack stuff for custom webpack overrides.

I guess in all of this my issue is that I'm deploying a standalone Next.js output to Azure App Service and new server.js file doesn't work the same as my custom server.js file before it. What also complicates this potentially is that it's deployed to Windows (with IIS) instead of Linux and unfortunately that's probably part of the issue. On Linux, I would probably be able to use default server.js that Next.js creates in standalone build, but here that server.js works differently and it cannot be used just like previous express based server.js.

[andormade]

I tried to do this, but my problem was that the output file tracer throws out a lot of files from standalone/node_modules/next, including dist/server/next.js, but without this file it's very difficult to set up a custom server.

[GoldenTK]

Did you try to install (full) next.js dependency after output file tracing?

[andormade]

This is not relevant anymore with the latest version.

[GoldenTK]

What’s the difference in latest version?

[Firgrep]

Perhaps one option is to set up a script or run a set of commands to insert and replace the contents of a ready-made server.js file into the server.js file that gets built in the standalone directory.

#!/bin/bash

# Specify the source and destination file paths
source_file_path="./source_file.js"
destination_file_path="./destination_file.js"

# Read the contents of the source file
source_file_contents=$(cat "$source_file_path")

# Replace the contents of the destination file with the source file contents
echo "$source_file_contents" > "$destination_file_path"

I'm going to try something similar, but using sed in order to append a few extra lines to the built server.js file. I reckon I'll run this on every deployment as part of the dockerfile (the plan is to dockerize our app).

[zjy365]

I also encountered the same problem, is there any solution?
https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

[JohannesKuehnel]

You mean like I described in this very discussion? ;)

#34599 (comment)

[zjy365]

Thank you very much. After searching and practicing, I know that your method is correct, but I think you are missing a way. If the customized content is relatively simple, it can be achieved directly by overriding server.js. I refer to https://www.bekk.christmas/post/2022/13/how-to-create-a-simple-custom-server-in-next-js

[JohannesKuehnel]

To get a custom server running with output: standalone, extra dependencies and Docker I came to the following conclusion:

1. Create your custom server.js like described in the docs
2. Make sure your next.config.js has output: 'standalone'
3. Create your Dockerfile like in the example
4. Add lines to copy your server.js file (after copying the standalone output)
5. Add a line to copy node_modules/next
6. Add lines to copy any other required dependencies or files (like ejs and templates in my case)
7. Build

Alternatively, you could bundle your server file (like @sadg mentioned).

So the Dockerfile would contain something like this:

...

# 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

# Custom server
COPY --from=builder --chown=nextjs:nodejs /app/dist/server.js ./server.js
COPY --from=builder --chown=nextjs:nodejs /app/node_modules/next ./node_modules/next
COPY --from=builder --chown=nextjs:nodejs /app/node_modules/ejs ./node_modules/ejs
COPY --from=builder --chown=nextjs:nodejs /app/src/views ./src/views

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

[Dupflo]

I am in the same situation with a custom server using depedencies

My server.js looks like this

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const { getServerUrl } = require('./utils/get-server-url')
const { logger } = require('./utils/logger')
const { connectAzureBus, injectKeyVaultValues, connectAppInsights } = require('./helpers/azure')
const { startRevalidation } = require('./app/api/webhook/revalidate/start')

switch (process.env.npm_lifecycle_event) {
  case 'start':
    process.env.NODE_ENV = 'production'
    break
  case 'dev':
    process.env.NODE_ENV = 'development'
    break
  default:
    logger.error(`${process.env.npm_lifecycle_event} does not exist`)
}

const { hostname, port, dev } = getServerUrl()

if (!dev) {
  const { config } = require('./.next/required-server-files.json')
  process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(config)
}

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app
  .prepare()
  .then(async () => {
    await injectKeyVaultValues()
  })
  .then(() => {
    createServer(async (req, res) => {
      const parsedUrl = parse(req.url, true)
      handle(req, res, parsedUrl)
    }).listen(port, (err) => {
      if (err) throw err
      logger.info(`APP_START ${process.env.NEXT_PUBLIC_APP_URL}`)
      if (!dev) {
        connectAppInsights()
        connectAzureBus().catch((error) => {
          logger.error(error)
          process.exit(1)
        })
        if (process.env.npm_config_clear) {
          startRevalidation()
        }
      }
    })
  })

First I noticed my ./utils, ./helpers and another file were not exporter inside the standalone folder once built so I decided to include it by using experimental.outputFileTracingIncludes

module.exports = ({
  output: 'standalone',
  experimental: {
    outputFileTracingIncludes:  {
      '/': [
        './utils/**/*',
        './helpers/**/*',
        './app/api/webhook/revalidate/start.js'
      ]},
  },

This is working but since I am using some package for azure such as application-insight, azure-bus and identity, this package are not include inside standalone node_modules so I had to move these with my dockerfile command

example :

....
  COPY --from=builder /app/node_modules/winston ./node_modules/winston
  COPY --from=builder /app/node_modules/@colors/colors ./node_modules/@colors/colors
  COPY --from=builder /app/node_modules/@dabh/diagnostics ./node_modules/@dabh/diagnostics
  COPY --from=builder /app/node_modules/async ./node_modules/async
  COPY --from=builder /app/node_modules/is-stream ./node_modules/is-stream
  COPY --from=builder /app/node_modules/logform ./node_modules/logform
  COPY --from=builder /app/node_modules/one-time ./node_modules/one-time
  COPY --from=builder /app/node_modules/readable-stream ./node_modules/readable-stream
  COPY --from=builder /app/node_modules/safe-stable-stringify ./node_modules/safe-stable-stringify
  COPY --from=builder /app/node_modules/stack-trace ./node_modules/stack-trace
  COPY --from=builder /app/node_modules/triple-beam ./node_modules/triple-beam
  COPY --from=builder /app/node_modules/winston-transport ./node_modules/winston-transport
...

I had to dot this for each dependency of my server.js file. This is boring...

[marko-hologram]

You can potentially use Vercel's nft library (https://github.com/vercel/nft) to get a list of all dependencies. I think they use this under the hood to trace all dependencies for standalone mode and just include what's actually used.

Create some Nodejs script that uses this library under the hood and run that Nodejs script at some point during your build process. Point the library to some entry file (maybe your custom server.js file?) and it should give you a list of all dependencies that it detected as being used by that entry file and it's dependencies. It's recursive. Then you can copy all those files into some appropriate output folder in that same Nodejs script.

I used this library on a project that had a custom server.js and used "standalone" output mode. I cannot remember all the specific details how I used it and unfortunately I don't have access to that project anymore to look, but I remember using it at some point in the build process to get all proper dependencies into the project output folders. Wish I could help you more!

[oldium]

With something like this (use after build as node install.js ./dist/server.js ./dist)?
(Thanks ChatGPT for writing this for me 😁)

// File install.js
import { nodeFileTrace } from "@vercel/nft";
import fs from "fs/promises";
import path from "path";

// Get command-line arguments
const [,, serverFile, targetDir] = process.argv;

if (!serverFile || !targetDir) {
  console.error("Usage: node install.js <server-file> <target-directory>");
  process.exit(1);
}

(async () => {
  try {
    // Trace dependencies of the provided file
    const { fileList } = await nodeFileTrace([serverFile],
      {conditions: ['node', 'production']});

    // Resolve absolute paths to avoid nested copying
    const targetDirAbsolute = path.resolve(targetDir);

    // Copy each file to the target directory with its nested structure
    for (const filePath of fileList) {
      const targetPath = path.join(targetDir, filePath);

      // Get the absolute path of the source file
      const sourcePathAbsolute = path.resolve(filePath);

      // Check if the file is already in the target directory
      if (sourcePathAbsolute.startsWith(targetDirAbsolute)) {
        console.log(`Skipping ${filePath} as it is already within the target directory.`);
        continue;
      }

      // Create necessary directories
      await fs.mkdir(path.dirname(targetPath), { recursive: true });

      // Copy the file
      await fs.copyFile(filePath, targetPath);
      console.log(`Copied ${filePath} to ${targetPath}`);
    }

    console.log("All files copied successfully.");
  } catch (error) {
    console.error("Error:", error);
  }
})();

[telephant]

amazing, but a little bit complicated🥺

[oldium]

I find a call to tsc --project <my-project>.json && node ./install.js ./dist/<my-server-file>.js ./dist as part of the build to be simple, but effective. It first transpiles the TypeScript into JavaScript (with tsc - if you are using TypeScript) and then it adds dependencies with node ./install.js into ./dist (i.e. copies used modules into ./dist/node_modules).

If anything is missing in the target ./dist/node_modules, you can call for example node ./install.js ./node_modules/extensionless/src/register.js ./dist (to include the extensionless module, which I use for startup to work with the JavaScript imports without file extensions and call Node.js as node --import=extensionless/register <my-server-file>.js).