feat: basePath support (#18)

* feat: `basePath` support

* fix: add basepath to image redirects

* feat: image support

* fix: server loading

* fix: add redirect for root image links

* fix: remove `basePath` from demo

Co-authored-by: lindsaylevine <57350178+lindsaylevine@users.noreply.github.com>

Co-authored-by: lindsaylevine <57350178+lindsaylevine@users.noreply.github.com>

Author: ascorbic

src/helpers/config.js

@@ -51,14 +51,14 @@ const getNetlifyRoutes = (nextRoute) => {
   return netlifyRoutes
 }
 
-exports.generateRedirects = async ({ netlifyConfig }) => {
+exports.generateRedirects = async ({ netlifyConfig, basePath }) => {
   const { dynamicRoutes } = await readJSON(join(netlifyConfig.build.publish, 'prerender-manifest.json'))
 
   const redirects = []
 
   netlifyConfig.redirects.push(
     ...HIDDEN_PATHS.map((path) => ({
-      from: path,
+      from: `${basePath}${path}`,
       to: '/404.html',
       status: 404,
       force: true,
@@ -78,20 +78,20 @@ exports.generateRedirects = async ({ netlifyConfig }) => {
 
   // This is only used in prod, so dev uses `next dev` directly
   netlifyConfig.redirects.push(
-    { from: '/_next/static/*', to: '/static/:splat', status: 200 },
+    { from: `${basePath}/_next/static/*`, to: '/static/:splat', status: 200 },
     {
-      from: '/*',
+      from: `${basePath}/*`,
       to: HANDLER_FUNCTION_PATH,
       status: 200,
       force: true,
       conditions: { Cookie: ['__prerender_bypass', '__next_preview_data'] },
     },
     ...redirects.map((redirect) => ({
-      from: redirect,
+      from: `${basePath}${redirect}`,
       to: ODB_FUNCTION_PATH,
       status: 200,
     })),
-    { from: '/*', to: HANDLER_FUNCTION_PATH, status: 200 },
+    { from: `${basePath}/*`, to: HANDLER_FUNCTION_PATH, status: 200 },
   )
 }
 

src/helpers/functions.js

@@ -33,13 +33,17 @@ exports.setupImageFunction = async ({
   constants: { INTERNAL_FUNCTIONS_SRC, FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC },
   imageconfig = {},
   netlifyConfig,
+  basePath,
 }) => {
   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 writeJSON(join(functionDirectory, 'imageconfig.json'), {
+    ...imageconfig,
+    basePath: [basePath, IMAGE_FUNCTION_NAME].join('/'),
+  })
   await copyFile(join(__dirname, '..', 'templates', 'ipx.js'), join(functionDirectory, functionName))
 
   const imagePath = imageconfig.path || '/_next/image'
@@ -48,13 +52,22 @@ exports.setupImageFunction = async ({
     {
       from: `${imagePath}*`,
       query: { url: ':url', w: ':width', q: ':quality' },
-      to: `/${IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
+      to: `${basePath}/${IMAGE_FUNCTION_NAME}/w_:width,q_:quality/:url`,
       status: 301,
     },
     {
-      from: `/${IMAGE_FUNCTION_NAME}/*`,
+      from: `${basePath}/${IMAGE_FUNCTION_NAME}/*`,
       to: `/.netlify/functions/${IMAGE_FUNCTION_NAME}`,
       status: 200,
     },
   )
+
+  if (basePath) {
+    // next/image generates image static URLs that still point at the site root
+    netlifyConfig.redirects.push({
+      from: '/_next/static/image/*',
+      to: '/static/image/:splat',
+      status: 200,
+    })
+  }
 }

src/index.js

@@ -42,7 +42,7 @@ module.exports = {
 
     checkNextSiteHasBuilt({ publish, failBuild })
 
-    const { images, target, appDir } = await getNextConfig({ publish, failBuild })
+    const { images, target, appDir, basePath } = await getNextConfig({ publish, failBuild })
 
     setBundler({ netlifyConfig, target })
 
@@ -54,18 +54,19 @@ module.exports = {
 
     await copy(`${appDir}/public`, `${publish}/`)
 
-    await setupImageFunction({ constants, imageconfig: images, netlifyConfig })
+    await setupImageFunction({ constants, imageconfig: images, netlifyConfig, basePath })
 
     await generateRedirects({
       netlifyConfig,
+      basePath,
     })
   },
 
   async onPostBuild({ netlifyConfig, constants: { FUNCTIONS_DIST = '.netlify/functions' }, utils: { run, cache } }) {
     // Remove swc binaries from the zipfile if present. Yes, it's a hack, but it drops >10MB from the zipfile when bundling with zip-it-and-ship-it
     for (const func of [ODB_FUNCTION_NAME, HANDLER_FUNCTION_NAME]) {
       await run(`zip`, [`-d`, join(FUNCTIONS_DIST, `${func}.zip`), '*node_modules/@next/swc-*']).catch(() => {
-        // This throws if there's none of these in the zipfile
+        // This throws if there's none of these in the zipfile, so ignore it
       })
     }
 

src/templates/ipx.js

@@ -2,8 +2,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')
+const { basePath, domains } = require('./imageconfig.json')
 
 exports.handler = createIPXHandler({
-  domains: config.domains || [],
+  basePath,
+  domains,
 })