@netlify/plugin-nextjs 4.4.1 → 4.4.4

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@netlify/plugin-nextjs",
-  "version": "4.4.1",
+  "version": "4.4.4",
   "description": "Run Next.js seamlessly on Netlify",
   "main": "lib/index.js",
   "files": [
     "lib/**/*",
+    "src/templates/edge/*",
     "manifest.yml"
   ],
   "dependencies": {
@@ -27,6 +28,7 @@
     "tiny-glob": "^0.2.9"
   },
   "devDependencies": {
+    "@delucis/if-env": "^1.1.2",
     "@netlify/build": "^27.0.1",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.4.1",

package/src/templates/edge/bundle.js

@@ -0,0 +1,7 @@
+/**
+ * This placeholder is replaced with the compiled Next.js bundle at build time
+ * @args {Object}
+ * @args.request {import("./runtime.ts").RequestData}
+ * @returns {Promise<import("./utils.ts").FetchEventResult>}
+ */
+export default async (props) => {}

package/src/templates/edge/ipx.ts

@@ -0,0 +1,32 @@
+import { Accepts } from 'https://deno.land/x/accepts/mod.ts'
+import type { Context } from 'netlify:edge'
+
+/**
+ * Implement content negotiation for images
+ */
+
+const handler = async (req: Request, context: Context) => {
+  const { searchParams } = new URL(req.url)
+  const accept = new Accepts(req.headers)
+  const type = accept.types(['avif', 'webp'])
+
+  const source = searchParams.get('url')
+  const width = searchParams.get('w')
+  const quality = searchParams.get('q') ?? 75
+
+  if (!source || !width) {
+    return new Response('Invalid request', {
+      status: 400,
+    })
+  }
+
+  const modifiers = [`w_${width}`, `q_${quality}`]
+
+  if (type) {
+    modifiers.push(`f_${type}`)
+  }
+
+  return context.rewrite(`/_ipx/${modifiers.join(',')}/${encodeURIComponent(source)}`)
+}
+
+export default handler

package/src/templates/edge/runtime.ts

@@ -0,0 +1,63 @@
+import type { Context } from 'netlify:edge'
+
+import edgeFunction from './bundle.js'
+import { buildResponse } from './utils.ts'
+
+export interface FetchEventResult {
+  response: Response
+  waitUntil: Promise<any>
+}
+
+export interface RequestData {
+  geo?: {
+    city?: string
+    country?: string
+    region?: string
+    latitude?: string
+    longitude?: string
+  }
+  headers: Record<string, string>
+  ip?: string
+  method: string
+  nextConfig?: {
+    basePath?: string
+    i18n?: Record<string, unknown>
+    trailingSlash?: boolean
+  }
+  page?: {
+    name?: string
+    params?: { [key: string]: string }
+  }
+  url: string
+  body?: ReadableStream<Uint8Array>
+}
+
+const handler = async (req: Request, context: Context) => {
+  const url = new URL(req.url)
+  if (url.pathname.startsWith('/_next/')) {
+    return
+  }
+
+  const request: RequestData = {
+    headers: Object.fromEntries(req.headers.entries()),
+    geo: {
+      country: context.geo.country?.code,
+      region: context.geo.subdivision?.code,
+      city: context.geo.city,
+    },
+    url: url.toString(),
+    method: req.method,
+    ip: req.headers.get('x-nf-client-address') ?? undefined,
+    body: req.body ?? undefined,
+  }
+
+  try {
+    const result = await edgeFunction({ request })
+    return buildResponse({ result, request: req, context })
+  } catch (error) {
+    console.error(error)
+    return new Response(error.message, { status: 500 })
+  }
+}
+
+export default handler

package/src/templates/edge/utils.ts

@@ -0,0 +1,64 @@
+import type { Context } from 'netlify:edge'
+
+export interface FetchEventResult {
+  response: Response
+  waitUntil: Promise<any>
+}
+
+/**
+ * This is how Next handles rewritten URLs.
+ */
+ export function relativizeURL(url: string | string, base: string | URL) {
+  const baseURL = typeof base === 'string' ? new URL(base) : base
+  const relative = new URL(url, base)
+  const origin = `${baseURL.protocol}//${baseURL.host}`
+  return `${relative.protocol}//${relative.host}` === origin
+    ? relative.toString().replace(origin, '')
+    : relative.toString()
+}
+
+
+export const addMiddlewareHeaders = async (
+  originResponse: Promise<Response> | Response,
+  middlewareResponse: Response,
+) => {
+  // If there are extra headers, we need to add them to the response.
+  if ([...middlewareResponse.headers.keys()].length === 0) {
+    return originResponse
+  }
+  // We need to await the response to get the origin headers, then we can add the ones from middleware.
+  const res = await originResponse
+  const response = new Response(res.body, res)
+  middlewareResponse.headers.forEach((value, key) => {
+    response.headers.set(key, value)
+  })
+  return response
+}
+export const buildResponse = async ({
+  result,
+  request,
+  context,
+}: {
+  result: FetchEventResult
+  request: Request
+  context: Context
+}) => {
+  const res = new Response(result.response.body, result.response)
+  request.headers.set('x-nf-next-middleware', 'skip')
+  const rewrite = res.headers.get('x-middleware-rewrite')
+  if (rewrite) {
+    const rewriteUrl = new URL(rewrite, request.url)
+    const baseUrl = new URL(request.url)
+    if(rewriteUrl.hostname !== baseUrl.hostname) {
+      // Netlify Edge Functions don't support proxying to external domains, but Next middleware does
+      const proxied = fetch(new Request(rewriteUrl.toString(), request))
+      return addMiddlewareHeaders(proxied, res)
+    }
+    res.headers.set('x-middleware-rewrite', relativizeURL(rewrite, request.url))
+    return addMiddlewareHeaders(context.rewrite(rewrite), res)
+  }
+  if (res.headers.get('x-middleware-next') === '1') {
+    return addMiddlewareHeaders(context.next(), res)
+  }
+  return res
+}