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,
+  };
+};