next.js runtime assetPrefix

Dockerfile

# This is snippet of next.js build Dockerfile

...

# placeholder hack for replacement at startup
ENV NEXT_PUBLIC_CDN_DOMAIN=http://MY_CDN_DOMAIN_REPLACE_ME
ENV NEXT_PUBLIC_BASE_PATH=/MY_BASE_PATH_REPLACE_ME

...

ENTRYPOINT ["/my-docker-entrypoint.sh"]

CMD ["node", "server.js"]

my-docker-entrypoint.sh

#!/bin/sh
set -e

echo "Replacing basePath and assetPrefix"

grep -lri 'MY_CDN_DOMAIN_REPLACE_ME' /code | xargs -r sed -i "s|http://MY_CDN_DOMAIN_REPLACE_ME|${NEXT_PUBLIC_CDN_DOMAIN}|gi"
grep -lr 'MY_BASE_PATH_REPLACE_ME' /code | xargs -r sed -i "s|/MY_BASE_PATH_REPLACE_ME|${NEXT_PUBLIC_BASE_PATH}|g"

CDN_ENCODED=$(node -e "console.log(encodeURIComponent('$NEXT_PUBLIC_CDN_DOMAIN'));")
BASE_PATH_ENCODED=$(node -e "console.log(encodeURIComponent('$NEXT_PUBLIC_BASE_PATH'));")

grep -lri 'MY_CDN_DOMAIN_REPLACE_ME' /code | xargs -r sed -i "s|http%3A%2F%2FMY_CDN_DOMAIN_REPLACE_ME|${CDN_ENCODED}|gi"
grep -lr 'MY_BASE_PATH_REPLACE_ME' /code | xargs -r sed -i "s|%2FMY_BASE_PATH_REPLACE_ME|${BASE_PATH_ENCODED}|g"

LEFT='"remotePatterns":\[{"protocol":"http","hostname":"my_cdn_domain_replace_me","port":"","pathname":"'$NEXT_PUBLIC_BASE_PATH'/\*\*","search":""}\]'
RIGHT=$(node <<'EOF'
const cdn = process.env.NEXT_PUBLIC_CDN_DOMAIN;
const base = process.env.NEXT_PUBLIC_BASE_PATH;
const assetPrefix = cdn && base ? `${cdn}${base}` : '/';
let remotePatterns = "";
if (assetPrefix === '/') {
    remotePatterns = '"remotePatterns":[]'
}
else {
    const url = new URL(assetPrefix);
    remotePatterns = `"remotePatterns":[{"protocol":"${url.protocol.replace(':', '')}","hostname":"${url.hostname}","port":"${url.port}","pathname":"${url.pathname}/**","search":""}]`;
}
EOF
)

grep -lr 'my_cdn_domain_replace_me' /code | xargs -r sed -i "s|${LEFT}|${RIGHT}|g"

echo "Running command as 'nextjs' user"

# This is required so the command gets passed as `-c "node server.js"``
CMD="$@"
exec su nextjs -s /bin/sh -c "$CMD"

next.config.mjs

const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
const assetPrefix = process.env.NEXT_PUBLIC_CDN_DOMAIN && process.env.NEXT_PUBLIC_BASE_PATH
  ? `${process.env.NEXT_PUBLIC_CDN_DOMAIN}${process.env.NEXT_PUBLIC_BASE_PATH}`
  : '/'; //if env var not found get resources from main server.

const remotePatterns = [];
if (assetPrefix !== '/') {
  const url = new URL(assetPrefix);
  const protocol = url.protocol.replace(':', '');
  remotePatterns.push(
    {
      protocol: protocol,
      hostname: url.hostname,
      port: url.port,
      pathname: `${url.pathname}/**`,
      search: '',
    },
  )
}
const nextConfig = {
  output: 'standalone',
  basePath: basePath,
  assetPrefix: assetPrefix,
  images: {
    remotePatterns: remotePatterns,
  },
};

export default nextConfig;