initial support for next/image on netlify (#138)

* initial support for next/image on netlify

* copy change to next/image caveat in readme

Co-authored-by: Jason Lengstorf <[email protected]>

Co-authored-by: Jason Lengstorf <[email protected]>

Author: lindsaylevine

README.md

@@ -50,6 +50,7 @@ The plugin can be found on [npm here](https://www.npmjs.com/package/@netlify/plu
   - [Using Netlify Identity](#using-netlify-identity)
 - [Caveats](#caveats)
   - [Fallbacks for Pages with `getStaticPaths`](#fallbacks-for-pages-with-getstaticpaths)
+  - [next/image](#next/image)
 - [Credits](#credits)
 - [Showcase](#showcase)
 
@@ -256,6 +257,11 @@ With `next-on-netlify`, when navigating to a path that is not defined in `getSta
 
 For more on this, see: [Issue #7](https://github.com/netlify/next-on-netlify/issues/7#issuecomment-636883539)
 
+### next/image
+
+Our existing solution for next/image is not very performant. We have performance improvements on our roadmap, dependent on internal work.
+
+To get better performance now, we recommend using a cloud provider like Cloudinary ([see the Next.js docs](https://nextjs.org/docs/basic-features/image-optimization#loader)).
 
 ## Credits
 

index.js

@@ -2,6 +2,7 @@ const prepareFolders = require("./lib/steps/prepareFolders");
 const copyPublicFiles = require("./lib/steps/copyPublicFiles");
 const copyNextAssets = require("./lib/steps/copyNextAssets");
 const setupPages = require("./lib/steps/setupPages");
+const setupImageFunction = require("./lib/steps/setupImageFunction");
 const setupRedirects = require("./lib/steps/setupRedirects");
 const {
   NETLIFY_PUBLISH_PATH,
@@ -26,6 +27,8 @@ const nextOnNetlify = (options = {}) => {
 
   setupPages({ functionsPath, publishPath });
 
+  setupImageFunction(functionsPath);
+
   setupRedirects(publishPath);
 };
 

lib/config.js

@@ -28,6 +28,10 @@ const FUNCTION_TEMPLATE_PATH = join(TEMPLATES_DIR, "netlifyFunction.js");
 // This is the file where custom redirects can be configured
 const CUSTOM_REDIRECTS_PATH = join(".", "_redirects");
 
+// This is the name used for copying our imageFunction template and for
+// creating the next/image redirect
+const NEXT_IMAGE_FUNCTION_NAME = "next_image";
+
 module.exports = {
   NETLIFY_PUBLISH_PATH,
   NETLIFY_FUNCTIONS_PATH,
@@ -37,4 +41,5 @@ module.exports = {
   TEMPLATES_DIR,
   FUNCTION_TEMPLATE_PATH,
   CUSTOM_REDIRECTS_PATH,
+  NEXT_IMAGE_FUNCTION_NAME,
 };

lib/steps/setupImageFunction.js

@@ -0,0 +1,16 @@
+const { copySync } = require("fs-extra");
+const { join } = require("path");
+const { NEXT_IMAGE_FUNCTION_NAME, TEMPLATES_DIR } = require("../config");
+
+// Move our next/image function into the correct functions directory
+const setupImageFunction = (functionsPath) => {
+  const functionName = `${NEXT_IMAGE_FUNCTION_NAME}.js`;
+  const functionDirectory = join(functionsPath, functionName);
+
+  copySync(join(TEMPLATES_DIR, "imageFunction.js"), functionDirectory, {
+    overwrite: false,
+    errorOnExist: true,
+  });
+};
+
+module.exports = setupImageFunction;

lib/steps/setupRedirects.js

@@ -1,7 +1,10 @@
 const { join } = require("path");
 const { existsSync, readFileSync, writeFileSync } = require("fs-extra");
 const { logTitle, logItem } = require("../helpers/logger");
-const { CUSTOM_REDIRECTS_PATH } = require("../config");
+const {
+  CUSTOM_REDIRECTS_PATH,
+  NEXT_IMAGE_FUNCTION_NAME,
+} = require("../config");
 const getSortedRoutes = require("../helpers/getSortedRoutes");
 const getNetlifyRoutes = require("../helpers/getNetlifyRoutes");
 const isRootCatchAllRedirect = require("../helpers/isRootCatchAllRedirect");
@@ -29,8 +32,14 @@ const setupRedirects = (publishPath) => {
     ...require("../pages/withoutProps/redirects"),
   ];
 
+  // Add next/image redirect to our image function
+  nextRedirects.push({
+    route: "/_next/image*  url=:url w=:width q=:quality",
+    target: `/.netlify/functions/${NEXT_IMAGE_FUNCTION_NAME}?url=:url&w=:width&q=:quality`,
+  });
+
   // Add _redirect section heading
-  if (nextRedirects.length >= 1) redirects.push("# Next-on-Netlify Redirects");
+  redirects.push("# Next-on-Netlify Redirects");
 
   // Sort routes: More-specific routes (e.g., static routing) precede
   // less-specific routes (e.g., catch-all)

lib/templates/imageFunction.js

@@ -0,0 +1,26 @@
+const jimp = require("jimp");
+
+// Function used to mimic next/image and sharp
+exports.handler = async (event) => {
+  const { url, w = 500, q = 75 } = event.queryStringParameters;
+  const width = parseInt(w);
+  const quality = parseInt(q);
+
+  const imageUrl = url.startsWith("/")
+    ? `${process.env.URL || "http://localhost:8888"}${url}`
+    : url;
+  const image = await jimp.read(imageUrl);
+
+  image.resize(width, jimp.AUTO).quality(quality);
+
+  const imageBuffer = await image.getBufferAsync(image.getMIME());
+
+  return {
+    statusCode: 200,
+    headers: {
+      "Content-Type": image.getMIME(),
+    },
+    body: imageBuffer.toString("base64"),
+    isBase64Encoded: true,
+  };
+};

package-lock.json

@@ -53,7 +53,8 @@
   "dependencies": {
     "@sls-next/lambda-at-edge": "^1.5.2",
     "commander": "^6.0.0",
-    "fs-extra": "^9.0.1"
+    "fs-extra": "^9.0.1",
+    "jimp": "^0.16.1"
   },
   "husky": {
     "hooks": {

package.json

@@ -23,6 +23,7 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/getStaticProps/withRevalidate/1.json  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
 /_next/data/%BUILD_ID%/getStaticProps/withRevalidate/2.json  /.netlify/functions/next_getStaticProps_withRevalidate_id  200
 /_next/data/%BUILD_ID%/getStaticProps/withRevalidate/withFallback/:id.json  /.netlify/functions/next_getStaticProps_withRevalidate_withFallback_id  200
+/_next/image*  url=:url w=:width q=:quality  /.netlify/functions/next_image?url=:url&w=:width&q=:quality  200
 /api/shows/:id  /.netlify/functions/next_api_shows_id  200
 /api/shows/:params/*  /.netlify/functions/next_api_shows_params  200
 /api/static  /.netlify/functions/next_api_static  200

tests/__snapshots__/defaults.test.js.snap

@@ -48,6 +48,7 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/getStaticProps/withFallback/:slug/*  /.netlify/functions/next_getStaticProps_withFallback_slug  200
 /_next/data/%BUILD_ID%/getStaticProps/withFallbackBlocking/:id.json  /.netlify/functions/next_getStaticProps_withFallbackBlocking_id  200
 /_next/data/%BUILD_ID%/getStaticProps/withRevalidate/withFallback/:id.json  /.netlify/functions/next_getStaticProps_withRevalidate_withFallback_id  200
+/_next/image*  url=:url w=:width q=:quality  /.netlify/functions/next_image?url=:url&w=:width&q=:quality  200
 /api/shows/:id  /.netlify/functions/next_api_shows_id  200
 /api/shows/:params/*  /.netlify/functions/next_api_shows_params  200
 /api/static  /.netlify/functions/next_api_static  200

tests/__snapshots__/i18n.test.js.snap

@@ -5,6 +5,7 @@ exports[`Routing creates Netlify redirects 1`] = `
 /_next/data/%BUILD_ID%/page.json  /.netlify/functions/next_page  200
 /_next/data/%BUILD_ID%/index.json  /.netlify/functions/next_all  200
 /_next/data/%BUILD_ID%/*  /.netlify/functions/next_all  200
+/_next/image*  url=:url w=:width q=:quality  /.netlify/functions/next_image?url=:url&w=:width&q=:quality  200
 /page  /.netlify/functions/next_page  200
 /  /.netlify/functions/next_all  200
 /_next/*  /_next/:splat  200

tests/__snapshots__/optionalCatchAll.test.js.snap

@@ -132,6 +132,14 @@ describe("API Pages", () => {
   });
 });
 
+describe("next/image", () => {
+  const functionsDir = join(PROJECT_PATH, "out_functions");
+
+  test("sets up next_image as a function in every project by default", () => {
+    expect(existsSync(join(functionsDir, "next_image.js"))).toBe(true);
+  });
+});
+
 describe("SSG Pages with getStaticProps", () => {
   test("creates pre-rendered HTML file in output directory", () => {
     const OUTPUT_PATH = join(PROJECT_PATH, "out_publish");

tests/defaults.test.js

@@ -63,14 +63,17 @@ describe("404 Page", () => {
 });
 
 describe("Routing", () => {
-  test("does not create any redirects", async () => {
+  test("adds next_image redirect only", async () => {
     // Read _redirects file
     const contents = readFileSync(
       join(PROJECT_PATH, "out_publish", "_redirects")
     );
-    const redirects = contents.toString();
+    const redirects = contents.toString().trim().split(/\n/);
 
     // Check that no redirects are present
-    expect(redirects).toEqual("");
+    expect(redirects[0]).toEqual("# Next-on-Netlify Redirects");
+    expect(redirects[1]).toEqual(
+      "/_next/image*  url=:url w=:width q=:quality  /.netlify/functions/next_image?url=:url&w=:width&q=:quality  200"
+    );
   });
 });

tests/preRenderedIndexPages.test.js

@@ -87,7 +87,8 @@ describe("Routing", () => {
     expect(redirects[3]).toEqual(
       "/_next/data/%BUILD_ID%/static.json  /.netlify/functions/next_static  200!  Cookie=__prerender_bypass,__next_preview_data"
     );
-    expect(redirects[4]).toEqual(
+    // [4] is the next_image redirect
+    expect(redirects[5]).toEqual(
       "/static  /.netlify/functions/next_static  200!  Cookie=__prerender_bypass,__next_preview_data"
     );
   });