Throws 404 on accessing routes in the app directory routing of nextjs 13

[ankushranka]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000 Binaries: Node: 16.17.0 npm: 8.19.2 Yarn: 1.22.19 pnpm: 7.5.2 Relevant packages: next: 13.0.0 eslint-config-next: 13.0.0 react: 18.2.0 react-dom: 18.2.0

Which example does this report relate to?

with-docker

What browser are you using? (if relevant)

Chrome 106.0.5249.119

How are you deploying your application? (if relevant)

No response

Describe the Bug

On next dev and next start, routes from both pages and app directory load. But 404 is thrown on app directory routes when served from a docker build.

Expected Behavior

Routes loaded from both pages and app directory must serve

To Reproduce

1. Created a new app using: npx create-next-app@latest --experimental-app
2. Added the docker configuration to be able to deploy to GCP Cloud Run from the with-docker example
3. Built a docker images using: docker build -t nextjs-docker .
4. Ran the built docker image using: docker run -p 3000:3000 nextjs-docker
5. Visit any route from the new app directory and it will throw a 404

[CMatheus04]

same here

[balazsorban44]

Thanks, output: "standalone" is not yet supported by the app directory, we will make sure it's mentioned in the roadmap

[ankushranka]

@balazsorban44 Thank you. Is there a docker example with nextjs 13 using app directory that can be deployed to Cloud Run (or similar) for testing?

[doums]

Hey, I ran into the same problem. So I ended to make my docker image using next start script. Here it is. Note that the context of the Dockerfile is the root of a monorepo, and the nextjs app is located in apps/website.

#
# INSTALL
#
FROM node:16-alpine AS install
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
# RUN apk add --no-cache libc6-compat

# disable hooks installation
ENV HUSKY=0

WORKDIR /opt/app
COPY package.json .
COPY package-lock.json .
COPY apps/website/ apps/website/
RUN npm pkg delete scripts.prepare
RUN npm ci


#
# BUILD
#
FROM install AS build
WORKDIR /opt/app/apps/website

# Next.js collects completely anonymous telemetry data about general usage.
# https://nextjs.org/telemetry
ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build


#
# SERVE
#
FROM node:16-alpine AS runner
WORKDIR /opt/app

ENV NODE_ENV production
ENV PORT=${PORT:-3000}
# Disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

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

COPY --from=build /opt/app/apps/website/public public/
COPY --from=build /opt/app/apps/website/fonts fonts/
COPY --from=build /opt/app/apps/website/next.config.js .
COPY --from=build /opt/app/apps/website/package.json .

COPY --from=build --chown=nextjs:nodejs /opt/app/apps/website/.next .next/
COPY --from=build --chown=nextjs:nodejs /opt/app/node_modules/ node_modules/

USER nextjs

EXPOSE ${PORT}

CMD ["npm", "run", "start"]

But as you see, this image is quite limited. Because I had to copy the whole root node_modules into the final stage, which obviously is not great for the size of the image.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.