feat: image support (#9)

* feat: image support

* fix: redirects

* fix: update ipx

* fix: redirects

* fix: update tests

* Update demo/netlify.toml

Co-authored-by: lindsaylevine <[email protected]>

* refactor: move redirect handling into helper

* fix: remove doubel redirects

Co-authored-by: lindsaylevine <[email protected]>

Author: ascorbic

package-lock.json

@@ -52,6 +52,7 @@
   "dependencies": {
     "@babel/core": "^7.15.0",
     "@netlify/functions": "^0.7.2",
+    "@netlify/ipx": "^0.0.5",
     "@netlify/parse-npm-script": "^0.1.2",
     "@vercel/node": "^1.11.2-canary.4",
     "chalk": "^4.1.2",

package.json

@@ -1,7 +1,9 @@
 const HANDLER_FUNCTION_NAME = '___netlify-handler'
 const ODB_FUNCTION_NAME = '___netlify-odb-handler'
+const IMAGE_FUNCTION_NAME = '_ipx'
 
 module.exports = {
+  IMAGE_FUNCTION_NAME,
   HANDLER_FUNCTION_NAME,
   ODB_FUNCTION_NAME,
 }

src/constants.js

@@ -0,0 +1,40 @@
+const { join } = require('path')
+
+const { copyFile, writeJSON, ensureDir } = require('fs-extra')
+
+const { IMAGE_FUNCTION_NAME } = require('../constants')
+
+const DEFAULT_FUNCTIONS_SRC = 'netlify/functions'
+
+// Move our next/image function into the correct functions directory
+const setupImageFunction = async ({
+  constants: { INTERNAL_FUNCTIONS_SRC, FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC },
+  imageconfig = {},
+  netlifyConfig,
+}) => {
+  const functionsPath = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC
+  const functionName = `${IMAGE_FUNCTION_NAME}.js`
+  const functionDirectory = join(functionsPath, IMAGE_FUNCTION_NAME)
+
+  await ensureDir(functionDirectory)
+  await writeJSON(join(functionDirectory, 'imageconfig.json'), imageconfig)
+  await copyFile(join(__dirname, '..', 'templates', 'ipx.js'), join(functionDirectory, functionName))
+
+  const imagePath = imageconfig.path || '/_next/image'
+
+  netlifyConfig.redirects.push(
+    {
+      from: `${imagePath}*`,
+      query: { url: ':url', w: ':width', q: ':quality' },
+      to: `/${IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
+      status: 301,
+    },
+    {
+      from: `/${IMAGE_FUNCTION_NAME}/*`,
+      to: `/.netlify/functions/${IMAGE_FUNCTION_NAME}`,
+      status: 200,
+    },
+  )
+}
+
+module.exports = setupImageFunction

src/helpers/setupImageFunction.js

@@ -1,13 +1,12 @@
 // @ts-check
 const path = require('path')
 
-const { satisfies } = require('semver')
-
 const copyNextDist = require('./helpers/copyNextDist')
 const generateFunctions = require('./helpers/generateFunctions')
 const getNextConfig = require('./helpers/getNextConfig')
 const getNextRoot = require('./helpers/getNextRoot')
 const setIncludedFiles = require('./helpers/setIncludedFiles')
+const setupImageFunction = require('./helpers/setupImageFunction')
 const shouldSkipPlugin = require('./helpers/shouldSkipPlugin')
 const verifyBuildTarget = require('./helpers/verifyBuildTarget')
 const verifyNetlifyBuildVersion = require('./helpers/verifyNetlifyBuildVersion')
@@ -55,6 +54,10 @@ module.exports = {
 
     const siteRoot = getNextRoot({ netlifyConfig })
 
+    const { images } = await getNextConfig(failBuild, siteRoot)
+
+    await setupImageFunction({ constants, imageconfig: images, netlifyConfig })
+
     await writeRedirects({
       siteRoot,
       netlifyConfig,

src/index.js

@@ -0,0 +1,9 @@
+const { createIPXHandler } = require('@netlify/ipx')
+
+// Injected at build time
+// eslint-disable-next-line import/no-unresolved, node/no-missing-require
+const config = require('./imageconfig.json')
+
+exports.handler = createIPXHandler({
+  domains: config.domains || [],
+})

src/templates/ipx.js

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`onBuild() writes correct redirects to netlifyConfig 1`] = `
-"/_next/static/* /static/:splat 200
-/* /.netlify/functions/___netlify-handler 200
+"/_next/image* /_ipx/w_:width,q_:quality/:url 301
+/_ipx/* /.netlify/functions/_ipx 200
 /_next/static/* /static/:splat 200
 /* /.netlify/functions/___netlify-handler 200
 "

test/__snapshots__/index.js.snap

@@ -73,6 +73,7 @@ beforeEach(async () => {
   const restoreCwd = changeCwd(tmpPath)
   Object.assign(this, { cleanup, restoreCwd })
   netlifyConfig.build.publish = path.join(process.cwd(), '.next')
+  netlifyConfig.redirects = []
   await useFixture('serverless_next_config')
 })