-
Notifications
You must be signed in to change notification settings - Fork 41
[Cloudflare] Update docs for 1.0.0-beta.0 #118
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
Merged
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
a8605f6
[Cloudflare] Update docs for 1.0.0-beta.0
vicb 7fbb91a
Update pages/cloudflare/caching.mdx
vicb a6d0d17
fixup! review feedback
vicb 367fa8d
fixup! getting started
vicb 3c0016a
Update pages/cloudflare/migrate-from-0.6-to-1.0.0-beta.mdx
vicb File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"index": "Overview", | ||
"get-started": "", | ||
"bindings": "", | ||
"caching": "", | ||
"examples": "" | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import { Callout } from "nextra/components"; | ||
|
||
### Bindings | ||
|
||
[Bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/) allow your Worker to interact with resources on the Cloudflare Developer Platform. When you declare a binding on your Worker, you grant it a specific capability, such as being able to read and write files to an [R2](https://developers.cloudflare.com/r2/) bucket. | ||
|
||
#### How to configure your Next.js app so it can access bindings | ||
|
||
Install [@opennextjs/cloudflare](https://www.npmjs.com/package/@opennextjs/cloudflare), and then add a [wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/) in the root directory of your Next.js app, as described in [Get Started](/cloudflare/get-started#3-create-a-wranglerjson-file). | ||
|
||
#### How to access bindings in your Next.js app | ||
|
||
You can access [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/) from any route of your Next.js app via `getCloudflareContext`: | ||
|
||
```js | ||
import { getCloudflareContext } from "@opennextjs/cloudflare"; | ||
|
||
export async function GET(request) { | ||
let responseText = "Hello World"; | ||
|
||
const myKv = getCloudflareContext().env.MY_KV_NAMESPACE; | ||
await myKv.put("foo", "bar"); | ||
const foo = await myKv.get("foo"); | ||
|
||
return new Response(foo); | ||
} | ||
``` | ||
|
||
<Callout type='info'> | ||
`getCloudflareContext` can only be used in SSG routes in "async mode" (making it return a promise), to run the function in such a way simply provide an options argument with `async` set to `true`: | ||
```js | ||
const context = await getCloudflareContext({ async: true }); | ||
``` | ||
|
||
**WARNING**: During SSG caution is advised since secrets (stored in `.dev.vars` files) and local development | ||
values from bindings (like values saved in a local KV) will be used for the pages static generation. | ||
|
||
</Callout> | ||
|
||
#### How to add bindings to your Worker | ||
|
||
Add bindings to your Worker by adding them to your [wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). | ||
|
||
## TypeScript type declarations for bindings | ||
|
||
To ensure that the `env` object from `getCloudflareContext().env` above has accurate TypeScript types, run the following Wrangler command to [generate types that match your Worker's configuration](https://developers.cloudflare.com/workers/languages/typescript/#generate-types-that-match-your-workers-configuration-experimental): | ||
|
||
``` | ||
npx wrangler types --experimental-include-runtime | ||
``` | ||
|
||
This will generate a `d.ts` file and (by default) save it to `.wrangler/types/runtime.d.ts`. You will be prompted in the command's output to add that file to your `tsconfig.json`'s `compilerOptions.types` array. | ||
|
||
If you would like to commit the file to git, you can provide a custom path. Here, for instance, the `runtime.d.ts` file will be saved to the root of your project: | ||
|
||
```bash | ||
npx wrangler types --experimental-include-runtime="./runtime.d.ts" | ||
``` | ||
|
||
To ensure that your types are always up-to-date, make sure to run `wrangler types --experimental-include-runtime` after any changes to your config file. | ||
|
||
## Other Cloudflare APIs (`cf`, `ctx`) | ||
|
||
You can access context about the incoming request from the [`cf` object](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), as well as lifecycle methods from the [`ctx` object](https://developers.cloudflare.com/workers/runtime-apis/context) from the return value of [`getCloudflareContext()`](https://github.com/opennextjs/opennextjs-cloudflare/blob/main/packages/cloudflare/src/api/get-cloudflare-context.ts): | ||
|
||
```js | ||
import { getCloudflareContext } from "@opennextjs/cloudflare"; | ||
|
||
export async function GET(request) { | ||
const { env, cf, ctx } = getCloudflareContext(); | ||
|
||
// ... | ||
} | ||
``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.