WIP

Author: bookernath

core/components/imageWithLqip/index.tsx

@@ -0,0 +1,29 @@
+'use server';
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import NextImage, { ImageProps } from 'next/image';
+
+import { buildConfig } from '~/build-config/reader';
+import bcCdnImageLoader from '~/lib/cdn-image-loader';
+
+function shouldUseLoaderProp(props: ImageProps): boolean {
+  if (typeof props.src !== 'string') return false;
+
+  const { src } = props;
+
+  return buildConfig.get('urls').cdnUrls.some((cdn) => src.startsWith(`https://${cdn}`));
+}
+
+/**
+ * This component should be used in place of Next's `Image` component for images from the
+ * BigCommerce platform, which will reduce load on the Next.js application for image assets.
+ *
+ * It defaults to use the default loader in Next.js if it's an image not from the BigCommerce CDN.
+ *
+ * @returns {React.ReactElement} The `<Image>` component
+ */
+export const Image = ({ ...props }: ImageProps) => {
+  const loader = shouldUseLoaderProp(props) ? bcCdnImageLoader : undefined;
+
+  return <NextImage loader={loader} {...props} />;
+};

core/next.config.ts

@@ -6,6 +6,7 @@ import { writeBuildConfig } from './build-config/writer';
 import { client } from './client';
 import { graphql } from './client/graphql';
 import { cspHeader } from './lib/content-security-policy';
+import withPlaiceholder from "@plaiceholder/next";
 
 const withNextIntl = createNextIntlPlugin({
   experimental: {
@@ -113,6 +114,9 @@ export default async (): Promise<NextConfig> => {
   // Apply withNextIntl to the config
   nextConfig = withNextIntl(nextConfig);
 
+  // Apply withPlaiceholder to the config
+  nextConfig = withPlaiceholder(nextConfig);
+
   if (process.env.ANALYZE === 'true') {
     const withBundleAnalyzer = bundleAnalyzer();
 

core/package.json

@@ -17,6 +17,7 @@
     "@conform-to/react": "^1.6.1",
     "@conform-to/zod": "^1.6.1",
     "@icons-pack/react-simple-icons": "^11.2.0",
+    "@plaiceholder/next": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -55,6 +56,7 @@
     "next-intl": "^4.1.0",
     "nuqs": "^2.4.3",
     "p-lazy": "^5.0.0",
+    "plaiceholder": "^3.0.0",
     "react": "^19.1.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.1.0",