include

Edge Includes with Netlify Edge Functions

The ability to transform the content of an HTTP response with Edge Functions enables you to substitute content into templates as you would with Edge Includes.

In this example, we look for an {{INCLUDE_PRICE_INFO}} placeholder in our response, and replace it with some other content.

Code example

Edge Functions are files held in the netlify/edge-functions directory.

import { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  // Get the page content
  const response = await context.next();
  const page = await response.text();

  // Search for the placeholder
  const regex = /{{INCLUDE_PRICE_INFO}}/i;

  // Replace the content
  const pricingContent = "It's expensive, but buy it anyway.";
  const updatedPage = page.replace(regex, pricingContent);
  return new Response(updatedPage, response);
};

• Explore the code for this Edge Function

View this example on the web

• https://edge-functions-examples.netlify.app/example/includes

Deploy to Netlify

You can deploy this and all the other examples in this repo as a site of your own to explore and experiment with, by clicking this button.