Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more pages bindings info #7979

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions content/pages/framework-guides/deploy-a-nextjs-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">}}
21 changes: 19 additions & 2 deletions content/pages/framework-guides/deploy-a-nuxt-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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/).
Pages Functions allow you to take advantage of [Cloudflare Workers](/workers/) and add dynamic functionality to add to your Pages site. With Pages Functions, you can integrate with storage solutions, connect to third party services, and use server-side rendering with your favorite full stack frameworks.
To use a Cloudflare storage resource, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](/d1/), with your Pages project:
1. Create a [Pages Function](/pages/platform/functions/get-started/).
2. Create a [binding](/pages/platform/functions/bindings/) that allows your Pages Function and storage resource to communicate.


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">}}
25 changes: 25 additions & 0 deletions content/pages/framework-guides/deploy-a-qwik-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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/).
Pages Functions allow you to take advantage of [Cloudflare Workers](/workers/) and add dynamic functionality to add to your Pages site. With Pages Functions, you can integrate with storage solutions, connect to third party services, and use server-side rendering with your favorite full stack frameworks.
To use a Cloudflare storage resource, such as [KV](https://developers.cloudflare.com/workers/learning/how-kv-works/), [Durable Object](/workers/learning/using-durable-objects/), [R2](/r2/), and [D1](/d1/), with your Pages project:
1. Create a [Pages Function](/pages/platform/functions/get-started/).
2. Create a [binding](/pages/platform/functions/bindings/) that allows your Pages Function and storage resource to communicate.


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">}}