Home | Edge Functions on Netlify

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <title>Home | Edge Functions on Netlify</title> <meta name="description" content="Explore our library of Edge Function examples and deploy your own to Netlify." />  <link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/>  <link rel="stylesheet" href="https://example-styles.netlify.app/styles.css">  <meta name="theme-color" content="#ffffff" /> <link rel="icon" href="/favicon.svg" /> <link rel="mask-icon" href="/mask-icon.svg" color="#000000" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/manifest.json" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@netlify" /> <meta name="twitter:creator" content="@netlify" /> <meta property="og:url" content="https://edge-functions-examples.netlify.app/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Home" /> <meta property="og:description" content="Explore our library of Edge Function examples and deploy your own to Netlify." /> <meta property="og:locale" content="en_US" /> <meta property="og:image" content="https://res.cloudinary.com/netlify/image/upload/c_fit,g_west,h_400,co_rgb:FFFFFFFF,l_text:netlify.com:Pacaembu-Bold.ttf_57:Netlify%20Edge%20Functions:%0AHome,w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" /> <meta property="og:image:alt" content="A Netlify branded open graph image representing Home" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="Edge Functions on Netlify" /> <script src="/lib/highlight.min.js"></script> <script>hljs.highlightAll();</script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-X2FMMZSSS9"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-X2FMMZSSS9'); </script> </head> <body> <header> <nav> <a href="https://www.netlify.com/"> <img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo"> </a> <ul> <ul><a href="/">Edge Functions Examples</a></li> </ul> </nav> <section> <h1>Edge Functions on Netlify</h1> <p>Reference examples for learning about Edge Functions on Netlify.</p> </section> </header> <hr> <main> <hr> <section> <h2>What are Edge Functions?</h2> <p>Using JavaScript and TypeScript, <a href="https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions" target="_blank" rel="noopener">Netlify Edge Functions</a> give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! <p> This all happens at the <strong>Edge</strong> — directly from the worldwide location closest to each user.</p> </p> <blockquote> <p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p> <p><a href="https://docs.netlify.com/edge-functions/overview/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Docs" target="_blank" rel="noopener">Learn more in the docs</a>.</p> </blockquote> </section> <section> <hr> <section> <h2>Examples</h2> <p> Explore the examples below, or over in the <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions" target="_BLANK" rel="noopener">GitHub repository</a> for this site. </p> <h3>Responses</h3> <ul> <li><a href="/example/hello">Hello world</a></li> <li><a href="/example/json">Return JSON</a></li> <li><a href="/example/image">Return an image</a></li> </ul> <h3>Rewrites and proxies</h3> <ul> <li><a href="/example/rewrite">Rewrite responses from another URL</a></li> <li><a href="/example/proxy-requests">Proxy requests to another source</a></li> </ul> <h3>HTTP Headers and Methods</h3> <ul> <li><a href="/example/set-request-header">Set custom HTTP request headers</a></li> <li><a href="/example/set-response-header">Set custom HTTP response headers</a></li> <li><a href="/example/method">Configure HTTP methods</a></li> </ul> <h3>Transforming responses</h3> <ul> <li><a href="/example/transform">Text transformations</a></li> <li><a href="/example/htmlrewriter">HTML transformations</a></li> <li><a href="/example/include">Content includes</a></li> </ul> <h3>Geolocation</h3> <ul> <li><a href="/example/geolocation">Determine a user's location</a></li> <li><a href="/example/country-block">Block content according to country</a></li> <li><a href="/example/localized-content">Serve localized content</a></li> </ul> <h3>Cookies</h3> <ul> <li><a href="/example/cookies-set">Set cookies</a></li> <li><a href="/example/cookies-read">Read cookies</a></li> <li><a href="/example/cookies-delete">Delete cookies</a></li> <li><a href="/example/abtest">Set up an A/B test using cookies</a></li> </ul> <h3>Streams</h3> <ul> <li><a href="/example/long-running">Long-running edge functions</a></li> <li><a href="/example/server-sent-events">Server-sent events (SSE)</a></li> </ul> <h3>WebAssembly</h3> <ul> <li><a href="/example/wasm">Edge WebAssembly</a></li> </ul> <h3>Environment and debugging</h3> <ul> <li><a href="/example/log">Write to the logs</a></li> <li><a href="/example/environment">Use environment variables</a></li> <li><a href="/example/uncaught-exceptions">Read logs for uncaught exceptions</a></li> <li><a href="/example/context-site">Access site information</a></li> </ul> </section> <p> </p> </section> <hr/> <section> <h3>Deploy this site to Netlify</h3> <p> Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account. </p> <p> <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a> </p> </section> </main> <footer> <div class="flex-btwn"> <a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app//images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a> <div class="social-icons"> <a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a> <a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a> <a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a> <a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a> <a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a> </div> </div> <div class="links-container"> <section> <h3>Developers</h3> <ul role="list"> <li><a href="https://developers.netlify.com/">Netlify Developers</a></li> <li><a href="https://developers.netlify.com/sdk/">Netlify SDK</a></li> <li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li> <li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li> <li><a href="https://docs.netlify.com">Documentation</a></li> <li><a href="https://netlify.com/conference/">Compose Conference</a></li> </ul> </section> <section> <h3>Company</h3> <ul role="list"> <li><a href="https://netlify.com/blog/">Blog</a></li> <li><a href="https://netlify.com/about/">About</a></li> <li><a href="https://netlify.com/careers/">Careers</a></li> <li><a href="https://netlify.com/press/">Press</a></li> <li><a href="https://swag.netlify.com/">Netlify Store</a></li> <li><a href="https://netlify.com/sustainability/">Sustainability</a></li> </ul> </section> <section> <h3>Contact Us</h3> <ul role="list"> <li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li> <li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li> <li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li> <li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li> <li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li> </ul> </section> </div> <small> <ul> <li><a href="https://netlify.com/trust-center/">Trust Center</a></li> <li><a href="https://netlify.com/privacy/">Privacy</a></li> <li><a href="https://netlify.com/security/">Security</a></li> <li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li> <li><a href="mailto:fraud@netlify.com?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li> </ul> <div>© 2024 Netlify</div> </small> </footer> </body> </html>

CINXE.COM

Home | Edge Functions on Netlify