Add more pages bindings info (#7979)

* add section about bindings in nextjs pages guide * add bindings section in qwik pages guide * update bindings section in nuxt pages guide * Apply suggestions from code review Co-authored-by: Kate Tungusova <[email protected]> * Apply suggestions from code review Co-authored-by: Kate Tungusova <[email protected]> * Update content/pages/framework-guides/deploy-a-nuxt-site.md Co-authored-by: Kate Tungusova <[email protected]> --------- Co-authored-by: Kate Tungusova <[email protected]>
cloudflare · Mar 21, 2023 · 60f759f · 60f759f
1 parent e04ba5b
commit 60f759f
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/content/pages/framework-guides/deploy-a-nextjs-site.md b/content/pages/framework-guides/deploy-a-nextjs-site.md
@@ -176,4 +176,29 @@ Every time you commit new code to your Next.js site, Cloudflare Pages will autom
 
 For the complete guide to deploying your first site to Cloudflare Pages, refer to the [Get started guide](/pages/get-started/).
 
+## Use bindings in your Next.js application
+
+A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/).
+
+In Next.js, add server-side code via [API Routes](https://nextjs.org/docs/api-routes/introduction) and [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). Then access bindings set for your application by accessing them in your code via `process.env`.
+
+The following code block shows an example of accessing a KV namespace in Next.js.
+
+```typescript
+---
+filename: src/index.tsx
+highlight: [4, 5]
+---
+// ...
+
+export async function getServerSideProps({ req }: GetServerSidePropsContext) => {
+  // the type `KVNamespace` comes from the @cloudflare/workers-types package
+  const { MY_KV } = (process.env as { MY_KV: KVNamespace }));
+
+  return {
+    // ...
+  };
+};
+```
+
 {{<render file="_learn-more.md" withParameters="Next.js">}}
diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md
@@ -66,8 +66,25 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t
 
 ## Use bindings in your Nuxt application
 
-It is not currently possible to access bindings from a Nuxt application (refer to this [Nuxt GitHub issue](https://github.com/nuxt/nuxt/issues/18599)).
+A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/).
 
-When bindings are accessible from a Nuxt application, we will update this guide accordingly.
+In Nuxt, add server-side code via [Server Routes and Middleware](https://nuxt.com/docs/guide/directory-structure/server#server-directory). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application.
+
+The following code block shows an example of accessing a KV namespace in Nuxt.
+
+```typescript
+---
+filename: src/my-endpoint.get.ts
+highlight: [2, 3]
+---
+export default defineEventHandler(({ context }) => {
+  // the type `KVNamespace` comes from the @cloudflare/workers-types package
+  const MY_KV: KVNamespace = context.cloudflare.env.MY_KV;
+
+  return {
+    // ...
+  };
+});
+```
 
 {{<render file="_learn-more.md" withParameters="Nuxt">}}
diff --git a/content/pages/framework-guides/deploy-a-qwik-site.md b/content/pages/framework-guides/deploy-a-qwik-site.md
@@ -66,4 +66,29 @@ For the complete guide to deploying your first site to Cloudflare Pages, refer t
 After deploying your site, you will receive a unique subdomain for your project on `*.pages.dev`.
 Every time you commit new code to your Qwik site, Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to [preview deployments](/pages/platform/preview-deployments/) on new pull requests, to preview how changes look to your site before deploying them to production.
 
+## Use bindings in your Qwik application
+
+A [binding](/pages/platform/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](https://blog.cloudflare.com/introducing-d1/).
+
+In QwikCity, add server-side code via [routeLoaders](https://qwik.builder.io/qwikcity/route-loader/) and [actions](https://qwik.builder.io/qwikcity/action/). Then access bindings set for your application via the `platform` object provided by the framework.
+
+The following code block shows an example of accessing a KV namespace in QwikCity.
+
+```typescript
+---
+filename: src/routes/index.tsx
+highlight: [4, 5]
+---
+// ...
+
+export const useGetServerTime = routeLoader$(({ platform }) => {
+  // the type `KVNamespace` comes from the @cloudflare/workers-types package
+  const { MY_KV } = (platform as { MY_KV: KVNamespace }));
+
+  return {
+    // ....
+  }
+});
+```
+
 {{<render file="_learn-more.md" withParameters="Qwik">}}