Replace next image optimization with drupal image styles

components/patterns/elements/image-loader.tsx

@@ -0,0 +1,13 @@
+const ImageLoader = ({ src, width }) => {
+  const imageStyles = [
+    {w: 128, s: 'breakpoint_sm_2x'},
+    {w: 384, s: 'breakpoint_md_2x'},
+    {w: 750, s: 'breakpoint_lg_2x'},
+    {w: 1200, s: 'breakpoint_xl_2x'},
+    {w: 3840, s: 'breakpoint_2xl_2x'},
+  ];
+  const style = imageStyles.find(s => s.w === width)?.s || 'breakpoint_xl_2x';
+  // Switch the image style for the desired width. Add the width parameter just to prevent console logs.
+  return src.toString().replace(/styles\/+w\//, `styles/${style}/`) + `&w=${width}`;
+}
+export default ImageLoader;

lib/libguides.tsx

@@ -21,6 +21,7 @@ const fetchLibGuides = async ({accountId, subjectId}: { accountId?: number, subj
     }
 
     const guidesConfig = {
+      next: {revalidate: 1},
       headers: {'Authorization': 'Bearer ' + token},
     }
 

next.config.js

@@ -9,27 +9,32 @@ module.exports = {
         hostname: process.env.NEXT_IMAGE_DOMAIN,
       },
     ],
+    deviceSizes: [
+      // 640,
+      750,
+      // 828,
+      // 1080,
+      1200,
+      // 1920,
+      // 2048,
+      3840
+    ],
+    imageSizes: [
+      // 16,
+      // 32,
+      // 48,
+      // 64,
+      // 96,
+      128,
+      // 256,
+      384
+    ],
+    loader: 'custom',
+    loaderFile: './components/patterns/elements/image-loader.tsx',
   },
   typescript: {
     ignoreBuildErrors: true
   },
-  async rewrites() {
-    return {
-      beforeFiles: [
-        {
-          source: '/_next/image',
-          destination: '/_next/image?url=/no-image.png',
-          has: [{type: 'query', key: 'url', value: (`htt[p|ps]://${process.env.NEXT_IMAGE_DOMAIN}.*`)}],
-          missing: [{type: 'query', key: 'url', value: '(.*itok=([\\w|-]+))'}]
-        },
-        {
-          source: '/_next/image',
-          destination: '/_next/image?url=:url',
-          has: [{type: 'query', key: 'url', value: '(?<url>.*[jpg|png|jpeg|gif]\?itok=([\\w|-]+)).*'}]
-        },
-      ]
-    };
-  },
   async headers() {
     if (process.env.NEXT_PUBLIC_NOBOTS === 'true') {
       return [