'Couldn't find a `pages` directory with Next.js and customer server build

I'm currently trying to create a two stage build for an application that runs with Next.js (version 12.0.6) and has a custom server for an API. I do not want to rebuild the app each single time docker runs so I copy the compiled files into the /app directory. I'd assume that the pages directory would work automatically from .next folder but unfortunately it doesn't.

While the app builds all fine, I am plagued by this issue:

Error: > Couldn't find a `pages` directory. Please create one under the project root
    at Object.findPagesDir (/app/node_modules/next/dist/lib/find-pages-dir.js:33:11)
    at /app/node_modules/next/dist/build/index.js:113:45
    at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/app/node_modules/next/dist/build/index.js:82:25)

My Docker file looks like this:

FROM node:lts-slim AS base
WORKDIR /base
COPY package*.json ./
RUN npm install
COPY . .

FROM base AS build
ENV NODE_ENV=production
WORKDIR /build
COPY --from=base /base ./

CMD mkdir ./pages
RUN npm run build

FROM node:lts-slim AS production

ENV NODE_ENV=production
WORKDIR /app

COPY --from=build /build/next.config.js ./
COPY --from=build /build/package*.json ./
COPY --from=build /build/.next ./.next
COPY --from=build /build/public ./public
COPY --from=build /build/dist ./dist

# RUN mkdir pages; < uncommenting this will silence the error but it's an empty fake directory

RUN npm install
EXPOSE 3000

CMD npm run start

I start the Next.js sever like this (also tried with hardcoded false for the dev property with no success):

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });

And the npm commands in the project are as follows:

 "scripts": {
    "prestart": "next build",
    "dev": "NODE_ENV=development ts-node --project tsconfig.server.json server/index.ts",
    "next-dev": "next dev",
    "build:server": "tsc --project tsconfig.server.json",
    "build:next": "next build",
    "build": "npm run build:next && npm run build:server",
    "next-start": "next start",
    "start": "NODE_ENV=production node ./dist/server/index.js",
    "test": "jest"
  },

Things I have tried so far:

  • Fiddling with the dir directory when creating the server. Unfortunately it seems to be correct by default pointing to the /app directly and changing it doesn't help
  • Fiddling with the distDir in next.config. Unfortunately the same result as above
  • Creating an empty pages folder in /app. This doesn't seem to work - pages are loaded from that folder and since there is nothing inside everything yields 404.
  • Copying the entire build into app. While this creates pages folder and works, it completely defeats the purpose of a multi-stage build.
  • Copying only pages folder. This fails miserably as it has dependencies on all of the other folders.

Could anyone please direct me on how to tackle this? I simply ran out of ideas and hopefully I'm missing something silly here.

Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source