next.js: All static assets (js/css/media) in Standalone mode become 404

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Enterprise
    Binaries:
      Node: 18.12.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.1-canary.1
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Standalone mode (output: “standalone”)

Link to the code that reproduces this issue

asdf

To Reproduce

next.config.js

const { i18n } = require('./next-i18next.config')

/** @type {import('next').NextConfig} */
const nextConfig = {
  // assetPrefix: ".", // https://github.com/vercel/next.js/issues/8158#issuecomment-687707467
  output: 'standalone', // https://developers.redhat.com/articles/2022/11/23/how-deploy-nextjs-applications-red-hat-openshift#building_a_container_to_run_your_next_js_application
  reactStrictMode: true,
  productionBrowserSourceMaps: true,
  i18n,
  async redirects() {
    return [
      {
        source: '/da-en/:slug*',
        destination: '/en/:slug*',
        permanent: true,
      },
      {
        source: '/fi-en/:slug*',
        destination: '/en/:slug*',
        permanent: true,
      },
      {
        source: '/fi-sv/:slug*',
        destination: '/sv/:slug*',
        permanent: true,
      },
      {
        source: '/no-en/:slug*',
        destination: '/en/:slug*',
        permanent: true,
      },
      {
        source: '/sv-en/:slug*',
        destination: '/en/:slug*',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

Run: npm run build

Run: node .next/standalone/server.js

Open http://localhost:3000

Describe the Bug

All js and css files become 404

p://localhost:3000/_next/static/css/36abb935a2bfb1bb.css net::ERR_ABORTED 404 (Not Found) p://localhost:3000/favicon.ico 404 (Not Found) p://localhost:3000/_next/static/chunks/main-764a718264343ae9.js net::ERR_ABORTED 404 (Not Found) etc

Expected Behavior

It can find and load all js/css files

Which browser are you using? (if relevant)

Latest Chrome

How are you deploying your application? (if relevant)

IISNode

About this issue

Original URL
State: open
Created a year ago
Reactions: 7
Comments: 23

Most upvoted comments

for me the script that works is "deploy": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"

then when run: node server.js in standalone folder works!

+13

luis-herazo on Aug 22, 2023

I faced this issue today, I just found a workaround for this: copy .next/static to .next/standalone/.next/static

+13

ducan-ne on May 20, 2023

Sharing the script I had to write to make this work (next version 13, output directory is called dist):

  "scripts": {
    "deploy": "next build && mkdir -p dist/standalone/public/_next && cp -r dist/static dist/standalone/public/_next/"
  },

mohamed--abdel-maksoud on Aug 11, 2023

IF you specify a custom distDir in the next.config.js file, the static file must be placed there too.

This.

The bug

There is actually a bug in the documentation: https://nextjs.org/docs/app/api-reference/next-config-js/output

Additionally, a minimal server.js file is also output which can be used instead of next start. This minimal server does not copy the public or .next/static folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the standalone/public and standalone/.next/static folders manually, after which server.js file will serve these automatically.

It should be noted here that .next directory is actually a default value of distDir and distDir is used in other places during generation of directories.

This is crucial when changing distDir as one must take into account copying static files to a different directory in external scripts. It shouldn’t work in a way that forces a developer to remember to change his external scripts everytime he changes NextJS config, notably distDir.

Proposed solution

To mitigate this issue I propose to hardcode third level dist to .next, that is to always have:

./<distDir>/standalone/.next/static

Reasoning

I know that top level dist may be important when one wants to deploy to different providers, but third level dist in the standalone directory is just an internal directory for server.js.

elrender on Feb 9, 2024

Confusingly, it seems you need to write your own script copy these assets over to the build folder yourself. An opt-in that would allow the Next build to do this for you would be nice if a CDN wasn’t configured to serve these assets

benweiser on Jun 12, 2023

Copying the assets manually works, yeah.

I just don’t think everyone will want to host them on CDNs. Could we perhaps get a config option that controls whether or not these assets are copied to the standalone folder?

jannisbecker on Dec 14, 2023

Ok i found it: https://github.com/vercel/next.js/blob/fb73c3a9d207105d8ffc70401799265e28ec0083/packages/next/src/server/lib/router-utils/filesystem.ts#L135

IF you specify a custom distDir in the next.config.js file, the static file must be placed there too.

So in my case with a configuration like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      process.env.NEXT_IMAGE_DOMAIN,
      process.env.NEXT_CDN_IMAGE_DOMAIN,
    ],
  },
  distDir: "dist",
  output: "standalone",
};

module.exports = nextConfig;

The working paths must be this:

/app $ find . -maxdepth 2 -type d
.
./.next
./public
./public/flags
./public/icons
./public/img
./dist
./dist/server
./dist/static
./dist/cache
./node_modules
./node_modules/@next
./node_modules/@swc
./node_modules/busboy
./node_modules/caniuse-lite
./node_modules/client-only
./node_modules/glob-to-regexp
./node_modules/graceful-fs
./node_modules/nanoid
./node_modules/next
./node_modules/picocolors
./node_modules/react
./node_modules/react-dom
./node_modules/scheduler
./node_modules/source-map-js
./node_modules/streamsearch
./node_modules/styled-jsx
./node_modules/watchpack

I lost 4 hours of my life for this.

paolomainardi on Jan 9, 2024

This solution not worked for me! I have https://example/subpath and whe i deploy my app, all the assets _next/static is being pointed to https://example/_next/static and returning 404. My version is Next 14.0.4. Could you help me please to setup this under ngnix-proxy-manager?

Did you find a way to get rid of this problem ?

MaximilienHe on Apr 2, 2024

I’m also facing this issue with v14.0.4

laaragm on Jan 25, 2024