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

* initial support for next/image on netlify * copy change to next/image caveat in readme Co-authored-by: Jason Lengstorf <jason.lengstorf@netlify.com> Co-authored-by: Jason Lengstorf <jason.lengstorf@netlify.com>

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