Search code examples
dockernext.jsproduction-environmentproduction

NextJS won't render images in production


I have a nextjs app that is using images from the public folder and outside sources. It works in development and not in production. It even works locally using the same production environment with docker and not when deployed. I am fetching some country flag icons from countryflagsapi.com. Public folder images also do not work.

Request URL: domain.com/_next/image?url=https%3A%2F%2Fcountryflagsapi.com%2Fpng%2FUA&w=16&q=75

Request response: "url" parameter is not allowed

This is the browser console error.

Uncaught TypeError: Error in invocation of contentFilterPrivate.isURLBlocked(string url, contentFilterPrivate.ElementType type, string sitekey): No matching signature.
    at FilterContent.isUrlFiltered_ (filter_content.js:202:44)
    at FilterContent.onResourceError_ (filter_content.js:229:14)
    at HTMLBodyElement.<anonymous> (filter_content.js:177:28)

next.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const plugins = [[withLess, withImages]];

module.exports = withPlugins(plugins, {
    images: {
        domains: [
            'countryflagsapi.com',
        ],
    },
});

I copy everything the app requires in the Dockerfile.

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.js ./next.config.js

Solution

  • Looking at the docker file provided by the next with-docker example, the only difference I find is the copy line points to the root vs specifying next.config.js again.

    # You only need to copy next.config.js 
    # if you are NOT using the default configuration
     COPY --from=builder /app/next.config.js ./
    

    vs

    COPY --from=builder /app/next.config.js ./next.config.js

    https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile#L45

    Additionally, can you check if the file exists in that location post deployment?