This trick allows you to build nextjs projects but change the basePath at runtime

!next-js-runtime-entrypoint-reconfig.md

NextJS Runtime Entrypoint Reconfig

NextJS seems to have no way to reconfigure the base path (vercel/next.js#16059).

Some propose a reverse proxy, but because static pages embed the basePrefix into them this also doesn't work well.

The alternative is quite undesirable -- building at runtime.

Here, we use a hopefully unique string /__ENTRYPOINT__ as the entrypoint, this allows us to just replace this string in all the next-built files at startup when we know the actual entrypoint.

Once building with this approach, the entrypoint can be customized, this also works for images, API endpoints, and more.

Tested on next@^12 NOTE: No longer works in next@^13

Complete repo for testing this: https://github.com/u8sand/test-nextjs-runtime-entrypoint-reconfig

---

The assumption here is that you're building your NextJS application with Docker, these files would be put in the root of your repo and you build with

docker build -t your-tag .

then you can run with arbitrary entrypoints i.e.

docker run -p 3000:3000 -e NEXT_PUBLIC_ENTRYPOINT=/myentrypoint -it your-tag

Dockerfile

FROM node
RUN apt-get update -y && apt-get install -y jq && rm -rf /var/lib/apt/lists/*
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . ./
RUN chmod +x ./entrypoint.sh
RUN NEXT_PUBLIC_ENTRYPOINT=/__ENTRYPOINT__ npm run build
ENV NEXT_PUBLIC_ENTRYPOINT=""
EXPOSE 3000
ENTRYPOINT ["./entrypoint.sh"]
CMD ["npm", "run", "start"]

entrypoint.sh

#!/bin/sh

# replace /__ENTRYPOINT__ with the runtime-configured entrypoint
if [ "$NEXT_PUBLIC_ENTRYPOINT" = "" ]; then
  # root entrypoint is handled differently from non-root, in particular
  #  - basePath="" rather than "/"
  #  - an extra redirect is added /x/ => /x -- but with root that would be // => / which is invalid
  cp .next/routes-manifest.json .next/routes-manifest.json.in
  jq -rc '.basePath = ""
    | .redirects = [
        .redirects
        | .[]
        | select((.source == "/__ENTRYPOINT__/" and .destination == "/__ENTRYPOINT__") | not)
      ]' .next/routes-manifest.json.in > .next/routes-manifest.json
fi
# first we look for /__ENTRYPOINT__/ -- this should become / in the case of empty entrypoint
#  then we look for /__ENTRYPOINT__ -- this should become "" in the case of empty entrypoint
find .next \
  -type f \
  -exec sed -i \
    -e "s#/__ENTRYPOINT__/#${NEXT_PUBLIC_ENTRYPOINT}/#g" \
    -e "s#/__ENTRYPOINT__#${NEXT_PUBLIC_ENTRYPOINT}#g" \
    {} +

$@

next.config.js

// ...

module.exports = {
  // ...
  basePath: process.env.NEXT_PUBLIC_ENTRYPOINT ? process.env.NEXT_PUBLIC_ENTRYPOINT : undefined,
  // ...
}

@castafab as noted on the post, this trick was tested on [email protected]. I just tested and it also works on [email protected] but on next@^13, some change was introduced which mangles the link somehow. Interestingly the link is correct in the page href but gets mangled when next pushes it.
It works for <Link href="/somelocation"> but not for <Image src="/someimage.png"> but the later can be worked around by either importing the image and using the imported image or by using <Image src={`${process.env.NEXT_PUBLIC_ENTRYPOINT}/someimage.png`} />.

I don't have the bandwidth right now to figure out what next changed in next@^13 -- if anyone else does and figures it out, do let us know. In the meantime, I updated the gist to note in bold that the trick doesn't work on next@^13.

Also I created this repo: https://github.com/u8sand/test-nextjs-runtime-entrypoint-reconfig with the fix applied to a fresh create-next-app

Hi thanks for the response, but the Link one works for you? that is the case for me also the link is correct in the page href but when i click in the link, gets mangled. Also if I open in a new tab works.