Open OZZlE opened 1 year ago
I am having the exact same issue
same issue here
next version "12.2.3" same issue here.
Any solutions or idea about this? I have the same issue on v13.3.0.
Any solutions or idea about this? I have the same issue on v13.3.0.
I used this instead works much better.. https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
not sure what Standalone mode is meant for
I faced this issue today, I just found a workaround for this: copy .next/static to .next/standalone/.next/static
Looking at the docs it seems that this is intended behavior:
“ 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.”
https://nextjs.org/docs/pages/api-reference/next-config-js/output
Yeah this is intended behavior as per the documentation for the standalone
output
mode.
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
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/"
},
The script that works
"scripts": {
"deploy": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
}
go to standalone folder then when run: node server.js
Having the same issue. Using next 13.0.6.
As far as I can tell, this is not a code issue, but maybe a documentation issue. If you look at the example dockerfile that uses standalone
, it shows how the files are copied.
I shortened it into a working docker example for myself. (note that dumb-init
is not strictly necessary):
FROM node:18-alpine AS build
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json .
RUN npm install --omit=dev
COPY . .
RUN npm run build
# Image for running the app
FROM node:18-alpine
RUN apk update && apk upgrade
RUN apk add --no-cache dumb-init
WORKDIR /app
# These are the important file copies
COPY --from=build /app/public ./public
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
EXPOSE 8080
ENV HOST=0.0.0.0 NODE_ENV=production PORT=8080
CMD ["dumb-init", "node", "server.js"]
感谢非常有用
I faced this issue today, I just found a workaround for this: copy .next/static to .next/standalone/.next/static
Can confirm, works with Next 13 for me.
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?
I am facing the same issue here, tried with 14.0.3
and 14.0.4
using a docker container and standalone mode.
Dockerfile:
FROM node:18-alpine
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
WORKDIR /app
RUN mkdir .next
RUN chown nextjs:nodejs /app
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --chown=nextjs:nodejs public ./public
COPY --chown=nextjs:nodejs dist/standalone ./
COPY --chown=nextjs:nodejs dist/static ./.next/static
USER nextjs
EXPOSE 80
ENV PORT 80
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"
CMD ["node", "server.js"]
/app
content:
/app $ find . -maxdepth 2 -type d
.
./.next
./.next/static
./public
./public/flags
./public/icons
./public/img
./dist
./dist/server
./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
Everything under _next/
path is broken:
❯ curl -I http://test.loc/_next/static/chunks/fd9d1056-a2be535770d9c3e6.js
HTTP/1.1 404 Not Found
Server: nginx/1.21.6
Date: Tue, 09 Jan 2024 18:05:11 GMT
Content-Type: text/html
Content-Length: 1275
Connection: keep-alive
ETag: "620fe3ac-4fb"
What am i doing wrong ?
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.
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?
I'm also facing this issue with v14.0.4
IF you specify a custom
distDir
in thenext.config.js
file, the static file must be placed there too.
This.
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
.
To mitigate this issue I propose to hardcode third level dist to .next, that is to always have:
./<distDir>/standalone/.next/static
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
.
I got a similar error to the one above and tried most of the solutions here, but they didn't solve the problem for me.
Finally, for the standalone build, I was able to provide a solution by copying in my own project as follows. Everything is fine now.
FROM node:18-alpine AS builder
WORKDIR /app
RUN apk add --no-cache libc6-compat
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN npm install --loglevel verbose
COPY . .
RUN npm run build
FROM node:18-alpine AS runner
WORKDIR /app
#ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
RUN mkdir .next
RUN chown nextjs:nodejs .next
COPY --from=builder --chown=nextjs:nodejs /app/dist/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/dist/.next/static ./dist/.next/static
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
#COPY --from=builder --chown=nextjs:nodejs /app/dist/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD HOSTNAME="0.0.0.0" node server.js
I copied .next/static
to .next/standalone/dist/.next
and my problem is fixed.
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 ?
Sharing the script I had to write to make this work (
next
version 13, output directory is calleddist
):"scripts": { "deploy": "next build && mkdir -p dist/standalone/public/_next && cp -r dist/static dist/standalone/public/_next/" },
Thanks, this worked for me!
Using here:
Sharing the script I had to write to make this work (
next
version 13, output directory is calleddist
):"scripts": { "deploy": "next build && mkdir -p dist/standalone/public/_next && cp -r dist/static dist/standalone/public/_next/" },
Thanks, this worked for me!
Using here:
- next 14.2.3
- pnpm 9.1.0
- (and also pnpm workspaces as it's a monorepo)
I'm still having that issue: https://github.com/hendisantika/nextjs-mysql-product-crud
Hi I have stumbled on this problem myself and my app
I am deploying in an Azure container and it works fine (everything loads), but if I try to access my app from a Terraform/ingress domain, I get all 404s
e.g if the domain is mydomain.com/
I get 404s for mydomain.com/_next
I have tried the Dockerfiles here but no luck... Does anyone have any suggestions? I am not using a custom distDir.
EDIT: For anyone testing the solutions above and not getting anywhere and using Ingress/Kube to direct to their app through another domain: check if your requests are being made to proxyUrl/_next
instead of deploymentUrl/_next
. If the former, there's your culprit and you will need to setup a custom server that serves the static assets off your deployment url
Verify canary release
Provide environment information
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
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