1 2<!DOCTYPE html> 3<html lang="en"> 4 5 <head> 6 <meta charset="UTF-8" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9 10 <!-- Meta --> 11 <title>JSON Response | Edge Functions on Netlify</title> 12 <meta name="description" content="Use Edge Functions to return a JSON response using Response.json()." /> 13 14 <!-- Fonts --> 15 <link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin /> 16 <link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/> 17 18 <!-- Netlify demo styles --> 19 <link rel="stylesheet" href="https://example-styles.netlify.app/styles.css"> 20 21 22 <!-- Favicons --> 23 <meta name="theme-color" content="#ffffff" /> 24 <link rel="icon" href="/favicon.svg" /> 25 <link rel="mask-icon" href="/mask-icon.svg" color="#000000" /> 26 <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 27 <link rel="manifest" href="/manifest.json" /> 28 29 30 <!-- Open Graph --> 31 <meta name="twitter:card" content="summary_large_image" /> 32 <meta name="twitter:site" content="@netlify" /> 33 <meta name="twitter:creator" content="@netlify" /> 34 35 <meta property="og:url" content="https://edge-functions-examples.netlify.app/example/json" /> 36 <meta property="og:type" content="website" /> 37 <meta property="og:title" content="JSON Response" /> 38 <meta property="og:description" content="Use Edge Functions to return a JSON response using Response.json()." /> 39 <meta property="og:locale" content="en_US" /> 40 41 <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:%0AJSON%20Response,w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" /> 42 <meta property="og:image:alt" content="A Netlify branded open graph image representing JSON Response" /> 43 <meta property="og:image:width" content="1200" /> 44 <meta property="og:image:height" content="630" /> 45 <meta property="og:site_name" content="Edge Functions on Netlify" /> 46 47
47<script src="/lib/highlight.min.js"></script>
47 48
48<script>hljs.highlightAll();</script>
48 49 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 49-50
49 50 <script async src="https://www.googletagmanager.com/gtag/js?id=
50G-X2FMMZSSS9
vendor: 16 bytes, lines 50-51
50"></script> 51
51<script> 52
vendor: 145 bytes, lines 52-55
52window.dataLayer = window.dataLayer || []; 53 function gtag(){dataLayer.push(arguments);} 54 gtag('js', new Date()); 55 gtag('config', '
55G-X2FMMZSSS9
vendor: 8 bytes, lines 55-56
55'); 56
56</script>
56 57 </head> 58 59 <body> 60 61 <header> 62 <nav> 63 <a href="https://www.netlify.com/"> 64 <img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo"> 65 </a> 66 <ul> 67 <ul><li>JSON Response</li></ul> 68 <ul><a href="/">Edge Functions Examples</a></li> 69 </ul> 70 </nav> 71 <section> 72 <h1>Edge Functions on Netlify</h1> 73 <p>Reference examples for learning about Edge Functions on Netlify.</p> 74 </section> 75 </header> 76 <hr> 77 78 <main> 79 80 81 82 <section> 83 84 <section> 85 <h1>JSON Response</h1> 86 <p>You can use Edge Functions to return a JSON response by returning <code>Response.json()</code> with a JavaScript object â no need to <code>JSON.stringify</code>!</p> 87 <p>In this example, we return a JSON object containing <code>hello: "world"</code>.</p> 88 89 <pre><code>import type { Context } from "@netlify/edge-functions"; 90 91export default async (request: Request, context: Context) => { 92 return Response.json({ hello: "world" }); 93}; 94</code></pre> 95 <h2>See this in action</h2> 96 <ul> 97 <li><a href="/json">View the response from the Edge Function</a></li> 98 <li>The Edge Function code: <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions/netlify/edge-functions/json.ts" target="_BLANK" rel="noopener">json.ts</a></li> 99 </ul> 100 101 <blockquote> 102 <h2>Pro tip!</h2> 103 <p>Need to return text/html from an Edge Function? Check out the <a href="/example/hello">Hello, world</a> example.</p> 104 </blockquote> 105 </section> 106 107 <p> 108 <a href="/" class="btn-primary">Explore more examples</a> 109 </p> 110 </section> 111 112 113<hr> 114<section> 115 <h2>What are Edge Functions?</h2> 116 <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! 117 <p> 118 This all happens at the <strong>Edge</strong> â directly from the worldwide location closest to each user.</p> 119 </p> 120 121 <blockquote> 122 <p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p> 123 <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> 124 </blockquote> 125 </section> 126 127 <hr/> 128 <section> 129 <h3>Deploy this site to Netlify</h3> 130 <p> 131 Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account. 132 </p> 133 <p> 134 <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> 135 </p> 136 </section> 137 138 </main> 139 140 141 <footer> 142 <div class="flex-btwn"> 143 <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> 144 <div class="social-icons"> 145 <a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a> 146 <a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a> 147 <a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a> 148 <a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a> 149 <a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a> 150 </div> 151 </div> 152 <div class="links-container"> 153 <section> 154 <h3>Developers</h3> 155 <ul role="list"> 156 <li><a href="https://developers.netlify.com/">Netlify Developers</a></li> 157 <li><a href="https://developers.netlify.com/sdk/">
157Netlify SDK</a></li> 158 <li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li> 159 <li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li> 160 <li><a href="https://docs.netlify.com">Documentation</a></li> 161 <li><a href="https://netlify.com/conference/">Compose Conference</a></li> 162 </ul> 163 </section> 164 <section> 165 <h3>Company</h3> 166 <ul role="list"> 167 <li><a href="https://netlify.com/blog/">Blog</a></li> 168 <li><a href="https://netlify.com/about/">About</a></li> 169 <li><a href="https://netlify.com/careers/">Careers</a></li> 170 171 <li><a href="https://netlify.com/press/">Press</a></li> 172 <li><a href="https://swag.netlify.com/">Netlify Store</a></li> 173 <li><a href="https://netlify.com/sustainability/">Sustainability</a></li> 174 </ul> 175 </section> 176 <section> 177 <h3>Contact Us</h3> 178 <ul role="list"> 179 <li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li> 180 <li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li> 181 <li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li> 182 <li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li> 183 <li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li> 184 </ul> 185 </section> 186 </div> 187 <small> 188 <ul> 189 <li><a href="https://netlify.com/trust-center/">Trust Center</a></li> 190 <li><a href="https://netlify.com/privacy/">Privacy</a></li> 191 <li><a href="https://netlify.com/security/">Security</a></li> 192 <li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li> 193 <li><a href="mailto:[email protected]?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li> 194 </ul> 195 <div>© 2025 Netlify</div> 196 </small> 197 </footer> 198 199 </body> 200</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.