small documentation improvements

Author: n1ru4l

examples/nextjs-edge/pages/api/graphql.ts

@@ -1,6 +1,4 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import { createYoga, createSchema } from 'graphql-yoga'
-import { NextRequest, NextFetchEvent } from 'next/server'
 
 // Docs: https://vercel.com/docs/concepts/functions/edge-functions
 

website/src/pages/docs/integrations/_meta.json

@@ -6,9 +6,10 @@
   "integration-with-fastify": "Fastify",
   "integration-with-koa": "Koa",
   "integration-with-nestjs": "NestJS",
-  "integration-with-nextjs": "Next.js",
+  "integration-with-nextjs": "Next.js (Vercel)",
   "integration-with-sveltekit": "SvelteKit",
   "integration-with-bun": "Bun",
   "integration-with-uwebsockets": "uWebSockets",
+  "integration-with-gcp": "Google Cloud Platform (GCP)",
   "z-other-environments": "Other Environments"
 }

website/src/pages/docs/integrations/integration-with-aws-lambda.mdx

@@ -6,7 +6,7 @@ AWS Lambda is a serverless computing platform that makes it easy to build applic
 
 ## Installation
 
-<PackageCmd packages={['graphql', 'aws-lambda', 'graphql-yoga']} />
+<PackageCmd packages={['graphql aws-lambda graphql-yoga']} />
 
 ## Example
 

website/src/pages/docs/integrations/integration-with-bun.mdx

@@ -8,7 +8,7 @@ So the configuration is really simple like any other JS runtime with Yoga;
 
 ## Installation
 
-<PackageCmd packages={['graphql', 'graphql-yoga']} />
+<PackageCmd packages={['graphql graphql-yoga']} />
 
 ## Usage
 

website/src/pages/docs/integrations/integration-with-cloudflare-workers.mdx

@@ -17,7 +17,7 @@ You will want to use the package `graphql-yoga` which has an agnostic HTTP handl
 
 ## Installation
 
-<PackageCmd packages={['graphql', 'graphql-yoga']} />
+<PackageCmd packages={['graphql graphql-yoga']} />
 
 ## Example with regular `fetch` event listener
 

website/src/pages/docs/integrations/integration-with-express.mdx

@@ -12,7 +12,7 @@ You can easily integrate GraphQL Yoga into your Express application with a few l
 
 ## Installation
 
-<PackageCmd packages={['express', 'graphql', 'graphql-yoga']} />
+<PackageCmd packages={['express graphql graphql-yoga']} />
 
 ## Example
 

website/src/pages/docs/integrations/integration-with-fastify.mdx

@@ -10,7 +10,7 @@ So you can benefit from the powerful plugins of Fastify ecosystem with GraphQL Y
 
 ## Installation
 
-<PackageCmd packages={['fastify', 'graphql', 'graphql-yoga']} />
+<PackageCmd packages={['fastify graphq graphql-yoga']} />
 
 ## Example
 

website/src/pages/docs/integrations/integration-with-gcp.mdx

@@ -7,7 +7,7 @@ It is easy to use GraphQL Yoga with GCP.
 
 ## Installation
 
-<PackageCmd packages={['graphql', 'graphql-yoga']} />
+<PackageCmd packages={['graphql graphql-yoga']} />
 
 ## Usage
 

website/src/pages/docs/integrations/integration-with-koa.mdx

@@ -7,7 +7,7 @@ GraphQL Yoga can be integrated easily as a route to the existing Koa application
 
 ## Installation
 
-<PackageCmd packages={['koa', 'graphql', 'graphql-yoga']} />
+<PackageCmd packages={['koa graphql graphql-yoga']} />
 
 ## Example
 

website/src/pages/docs/integrations/integration-with-nextjs.mdx

@@ -1,12 +1,12 @@
-import { PackageCmd } from '@theguild/components'
+import { PackageCmd, Callout } from '@theguild/components'
 
 # Integration with Next.js
 
 [Next.js](https://nextjs.org) is a web framework that allows you to build websites very quickly and GraphQL Yoga can be integrated with Next.js easily as [an API Route](https://nextjs.org/docs/api-routes/api-middlewares).
 
 ## Installation
 
-<PackageCmd packages={['graphql', 'graphql-yoga']} />
+<PackageCmd packages={['graphql graphql-yoga']} />
 
 ## Example
 
@@ -47,6 +47,43 @@ export default createYoga<{
 
 > You can also check a full example on our GitHub repository [here](https://github.com/dotansimha/graphql-yoga/tree/v3/examples/nextjs)
 
+## Edge Function
+
+<Callout>
+  Edge functions is a feature of the Vercel platform and not available when
+  using Next.js as a standalone server. Learn more about edge functions on the
+  [Vercel documentation](https://nextjs.org/docs/api-routes/edge-functions).
+</Callout>
+
+For edge functions you need to adjust the `config` object to include the `runtime` property with the value `"edge"` and export `yoga.handleRequest` instead of `yoga`.
+
+```ts filename="pages/api/graphql.ts" {2-5,24}
+import { createYoga, createSchema } from 'graphql-yoga'
+
+export const config = {
+  runtime: 'edge'
+}
+
+const yoga = createYoga({
+  graphqlEndpoint: '/api/graphql',
+  schema: createSchema({
+    typeDefs: /* GraphQL */ `
+      type Query {
+        greetings: String
+      }
+    `,
+    resolvers: {
+      Query: {
+        greetings: () =>
+          'This is the `greetings` field of the root `Query` type'
+      }
+    }
+  })
+})
+
+export default yoga.handleRequest
+```
+
 ## WebSockets for subscriptions
 
 WebSockets cannot be used with [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction), we therefore have to create a [custom Next.js server](https://nextjs.org/docs/advanced-features/custom-server) that will serve the GraphQL API, WebSockets and the rest of Next.js content.