javascriptnode.jstypescriptnext.jsnext-intl

withNextIntl and withPlaiceholder do not work together in NextJS


I am using the latest NextJS 14. And in next.config.mjs file as above, I wrapped my nextConfig in two plugins, but when I deployed them to Vercel, it simply cannot be built. I am relatively new to this situation, so I stop using plaiceholder so switched to Jimp to blur my image, which works smooth. Nevertheless, I would like to know what's the solution here, in case I ever want to work in this setup again.

import createNextIntlPlugin from "next-intl/plugin";
import withPlaiceholder from "@plaiceholder/next";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "firebasestorage.googleapis.com",
      },
      {
        protocol: "https",
        hostname: "cdn.sanity.io",
      },
    ],
  },
  env: {
    POSTGRES_PRISMA_URL: process.env.POSTGRES_PRISMA_URL,
    POSTGRES_URL_NON_POOLING: process.env.POSTGRES_URL_NON_POOLING,
  },
};


export default withPlaiceholder(withNextIntl(nextConfig));

Solution

  • I stop using plaiceholder so switched to Jimp to blur my image, and Redis to cache it, which works smooth.

    enter image description here