Use sharp as image optimizer

.github/dependabot.yml

@@ -6,3 +6,4 @@ updates:
       interval: 'daily'
     allow:
       - dependency-name: 'next'
+      - dependency-name: 'sharp'

lib/declarations.d.ts

@@ -9,5 +9,6 @@ declare module NodeJS {
     TF_NEXTIMAGE_IMAGE_SIZES?: string;
     TF_NEXTIMAGE_SOURCE_BUCKET?: string;
     __DEBUG__USE_LOCAL_BUCKET?: string;
+    NEXT_SHARP_PATH?: string;
   }
 }

lib/handler.ts

@@ -1,3 +1,7 @@
+// Set NEXT_SHARP_PATH environment variable
+// ! Make sure this comes before the fist import
+process.env.NEXT_SHARP_PATH = require.resolve('sharp');
+
 import { ImageConfig, imageConfigDefault } from 'next/dist/server/image-config';
 import { parse as parseUrl } from 'url';
 import {

lib/package.json

@@ -18,14 +18,15 @@
   "dependencies": {
     "aws-sdk": "*",
     "next": "11.1.0",
-    "node-fetch": "2.6.1"
+    "node-fetch": "2.6.1",
+    "sharp": "0.29.0"
   },
   "devDependencies": {
     "@types/aws-lambda": "8.10.56",
     "@types/node-fetch": "^2.5.7",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "@vercel/nft": "0.10.1",
+    "@vercel/nft": "0.13.1",
     "archiver": "^5.3.0",
     "glob": "^7.1.6",
     "typescript": "^4.1.3"

scripts/bundle.js

@@ -15,29 +15,13 @@ async function main() {
   // Get all files from build dir
   const buildFiles = glob.sync('**/*.js', { cwd: buildDir, absolute: true });
 
-  // Squoosh files
-  const squooshFiles = glob.sync(
-    'node_modules/next/dist/server/lib/squoosh/**/*.js',
-    {
-      cwd: workspaceRoot,
-      absolute: true,
-    }
-  );
-
-  const { fileList } = await nodeFileTrace([...buildFiles, ...squooshFiles], {
+  const { fileList } = await nodeFileTrace(buildFiles, {
     base: workspaceRoot,
     processCwd: process.cwd(),
     // aws-sdk is already provided in Lambda images
     ignore: ['**/aws-sdk/**/*'],
   });
 
-  // Manually add node_modules/next/node_modules/jest-worker/build/workers/threadChild.js
-  // This is likely a bug in nft or Next.js codebase because this file is required when the png
-  // example is processed
-  fileList.push(
-    'node_modules/next/node_modules/jest-worker/build/workers/threadChild.js'
-  );
-
   // Create zip file
   await new Promise((resolve, reject) => {
     const outputFile = fs.createWriteStream(

test/constants.ts

@@ -21,9 +21,6 @@ export const acceptAllFixtures: Fixture[] = [
   ['webp/animated.webp', { ext: 'webp', 'content-type': 'image/webp' }],
 ];
 
-// Next.js image converter is not able to
-// - gif -> webp
-// - tiff -> webp
 export const acceptWebpFixtures: Fixture[] = [
   [
     'bmp/test.bmp',
@@ -32,11 +29,11 @@ export const acceptWebpFixtures: Fixture[] = [
       'content-type': 'image/bmp',
     },
   ],
-  ['gif/test.gif', { ext: 'gif', 'content-type': 'image/gif' }],
+  ['gif/test.gif', { ext: 'webp', 'content-type': 'image/webp' }],
   ['jpeg/test.jpg', { ext: 'webp', 'content-type': 'image/webp' }],
   ['png/test.png', { ext: 'webp', 'content-type': 'image/webp' }],
   ['svg/test.svg', { ext: 'svg', 'content-type': 'image/svg+xml' }],
-  ['tiff/test.tiff', { ext: 'tiff', 'content-type': 'image/tiff' }],
+  ['tiff/test.tiff', { ext: 'webp', 'content-type': 'image/webp' }],
   ['webp/test.webp', { ext: 'webp', 'content-type': 'image/webp' }],
   ['webp/animated.webp', { ext: 'webp', 'content-type': 'image/webp' }],
 ];

test/e2e.test.ts

@@ -99,7 +99,7 @@ describe('[e2e]', () => {
             },
           }
         );
-        const body = await response.text();
+        const body = await response.buffer();
 
         expect(response.status).toBe(200);
         expect(body).toMatchFile(snapshotFileName);
@@ -145,7 +145,7 @@ describe('[e2e]', () => {
           }
         );
 
-        const body = await response.text();
+        const body = await response.buffer();
 
         expect(response.status).toBe(200);
         expect(body).toMatchFile(snapshotFileName);
@@ -189,7 +189,7 @@ describe('[e2e]', () => {
             },
           }
         );
-        const body = await response.text();
+        const body = await response.buffer();
 
         expect(response.status).toBe(200);
         expect(body).toMatchFile(snapshotFileName);
@@ -235,7 +235,7 @@ describe('[e2e]', () => {
           }
         );
 
-        const body = await response.text();
+        const body = await response.buffer();
 
         expect(response.status).toBe(200);
         expect(body).toMatchFile(snapshotFileName);
@@ -298,7 +298,7 @@ describe('[e2e]', () => {
     test(
       'Internal: Fetch image from S3',
       async () => {
-        const fixture = acceptAllFixtures[0];
+        const fixture = acceptWebpFixtures[1];
         const publicPath = `/${fixture[0]}`;
         const optimizerParams = new URLSearchParams({
           url: publicPath,
@@ -310,14 +310,12 @@ describe('[e2e]', () => {
           `${route}?${optimizerParams.toString()}`,
           {
             headers: {
-              Accept: '*/*',
+              Accept: 'image/webp,*/*',
               Referer: `http://${s3Endpoint}/`,
             },
           }
         );
 
-        const body = await response.text();
-
         expect(response.ok).toBeTruthy();
         expect(response.headers.get('content-type')).toBe(
           fixture[1]['content-type']
@@ -389,7 +387,7 @@ describe('[e2e]', () => {
             },
           }
         );
-        const body = await response.text();
+        const body = await response.buffer();
 
         expect(response.status).toBe(200);
         expect(body).toMatchFile(snapshotFileName);