@opennextjs/cloudflare 0.0.0-fd3c2b9 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -13
- package/dist/api/chunk-VTBEIZPQ.mjs +32 -0
- package/dist/api/get-cloudflare-context.d.mts +26 -0
- package/dist/api/get-cloudflare-context.mjs +6 -0
- package/dist/api/index.d.mts +1 -0
- package/dist/api/index.mjs +6 -0
- package/dist/cli/constants/incremental-cache.ts +8 -0
- package/dist/{index.mjs → cli/index.mjs} +585 -362
- package/dist/cli/templates/cache-handler/index.ts +1 -0
- package/dist/cli/templates/cache-handler/open-next-cache-handler.ts +148 -0
- package/dist/cli/templates/cache-handler/utils.ts +41 -0
- package/dist/{templates → cli/templates}/shims/node-fs.ts +1 -1
- package/dist/cli/templates/worker.ts +156 -0
- package/package.json +29 -6
- package/dist/templates/worker.ts +0 -128
- /package/dist/{templates → cli/templates}/shims/empty.ts +0 -0
- /package/dist/{templates → cli/templates}/shims/env.ts +0 -0
- /package/dist/{templates → cli/templates}/shims/throw.ts +0 -0
package/README.md
CHANGED
|
@@ -1,37 +1,110 @@
|
|
|
1
|
-
#
|
|
1
|
+
# OpenNext for Cloudflare
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Deploy Next.js apps to Cloudflare!
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[OpenNext for Cloudflare](https://opennext.js.org/cloudflare) is Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
pnpm add -D wrangler@latest @opennextjs/cloudflare
|
|
9
|
-
```
|
|
7
|
+
## Getting started
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
You can use [`create-next-app`](https://nextjs.org/docs/pages/api-reference/cli/create-next-app) to start a new application or take an existing Next.js application and deploy it to Cloudflare using the following few steps:
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
## Configure your app
|
|
12
|
+
|
|
13
|
+
- add the following `devDependencies` to the `package.json`:
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
|
|
16
|
+
npm add -D wrangler@latest @opennextjs/cloudflare
|
|
17
|
+
# or
|
|
18
|
+
pnpm add -D wrangler@latest @opennextjs/cloudflare
|
|
19
|
+
# or
|
|
20
|
+
yarn add -D wrangler@latest @opennextjs/cloudflare
|
|
21
|
+
# or
|
|
22
|
+
bun add -D wrangler@latest @opennextjs/cloudflare
|
|
17
23
|
```
|
|
18
24
|
|
|
19
25
|
- add a `wrangler.toml` at the root of your project
|
|
20
26
|
|
|
21
27
|
```toml
|
|
22
28
|
#:schema node_modules/wrangler/config-schema.json
|
|
23
|
-
name = "<app-name>"
|
|
29
|
+
name = "<your-app-name>"
|
|
24
30
|
main = ".worker-next/index.mjs"
|
|
25
31
|
|
|
26
|
-
compatibility_date = "2024-
|
|
27
|
-
compatibility_flags = ["
|
|
32
|
+
compatibility_date = "2024-09-23"
|
|
33
|
+
compatibility_flags = ["nodejs_compat"]
|
|
28
34
|
|
|
29
35
|
# Use the new Workers + Assets to host the static frontend files
|
|
30
|
-
|
|
36
|
+
assets = { directory = ".worker-next/assets", binding = "ASSETS" }
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
You can enable Incremental Static Regeneration ([ISR](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration)) by adding a KV binding named `NEXT_CACHE_WORKERS_KV` to your `wrangler.toml`:
|
|
40
|
+
|
|
41
|
+
- Create the binding
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npx wrangler kv namespace create NEXT_CACHE_WORKERS_KV
|
|
45
|
+
# or
|
|
46
|
+
pnpm wrangler kv namespace create NEXT_CACHE_WORKERS_KV
|
|
47
|
+
# or
|
|
48
|
+
yarn wrangler kv namespace create NEXT_CACHE_WORKERS_KV
|
|
49
|
+
# or
|
|
50
|
+
bun wrangler kv namespace create NEXT_CACHE_WORKERS_KV
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
- Paste the snippet to your `wrangler.toml`:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
[[kv_namespaces]]
|
|
57
|
+
binding = "NEXT_CACHE_WORKERS_KV"
|
|
58
|
+
id = "..."
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
> [!WARNING]
|
|
62
|
+
> The current support for ISR is limited.
|
|
63
|
+
|
|
64
|
+
## Local development
|
|
65
|
+
|
|
66
|
+
- you can use the regular `next` CLI to start the Next.js dev server:
|
|
67
|
+
|
|
68
|
+
## Local preview
|
|
69
|
+
|
|
70
|
+
Run the following commands to preview the production build of your application locally:
|
|
71
|
+
|
|
72
|
+
- build the app and adapt it for Cloudflare
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npx cloudflare
|
|
76
|
+
# or
|
|
77
|
+
pnpm cloudflare
|
|
78
|
+
# or
|
|
79
|
+
yarn cloudflare
|
|
80
|
+
# or
|
|
81
|
+
bun cloudflare
|
|
31
82
|
```
|
|
32
83
|
|
|
33
84
|
- Preview the app in Wrangler
|
|
34
85
|
|
|
35
86
|
```bash
|
|
87
|
+
npx wrangler dev
|
|
88
|
+
# or
|
|
36
89
|
pnpm wrangler dev
|
|
90
|
+
# or
|
|
91
|
+
yarn wrangler dev
|
|
92
|
+
# or
|
|
93
|
+
bun wrangler dev
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Deploy your app
|
|
97
|
+
|
|
98
|
+
Deploy your application to production with the following:
|
|
99
|
+
|
|
100
|
+
- build the app and adapt it for Cloudflare
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
npx cloudflare && npx wrangler deploy
|
|
104
|
+
# or
|
|
105
|
+
pnpm cloudflare && pnpm wrangler deploy
|
|
106
|
+
# or
|
|
107
|
+
yarn cloudflare && yarn wrangler deploy
|
|
108
|
+
# or
|
|
109
|
+
bun cloudflare && bun wrangler deploy
|
|
37
110
|
```
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// src/api/get-cloudflare-context.ts
|
|
2
|
+
import "server-only";
|
|
3
|
+
var cloudflareContextSymbol = Symbol.for("__cloudflare-context__");
|
|
4
|
+
async function getCloudflareContext() {
|
|
5
|
+
const global = globalThis;
|
|
6
|
+
const cloudflareContext = global[cloudflareContextSymbol];
|
|
7
|
+
if (!cloudflareContext) {
|
|
8
|
+
return getCloudflareContextInNextDev();
|
|
9
|
+
}
|
|
10
|
+
return cloudflareContext;
|
|
11
|
+
}
|
|
12
|
+
var cloudflareContextInNextDevSymbol = Symbol.for("__next-dev/cloudflare-context__");
|
|
13
|
+
async function getCloudflareContextInNextDev() {
|
|
14
|
+
const global = globalThis;
|
|
15
|
+
if (!global[cloudflareContextInNextDevSymbol]) {
|
|
16
|
+
const { getPlatformProxy } = await import(
|
|
17
|
+
/* webpackIgnore: true */
|
|
18
|
+
`${"__wrangler".replaceAll("_", "")}`
|
|
19
|
+
);
|
|
20
|
+
const { env, cf, ctx } = await getPlatformProxy();
|
|
21
|
+
global[cloudflareContextInNextDevSymbol] = {
|
|
22
|
+
env,
|
|
23
|
+
cf,
|
|
24
|
+
ctx
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return global[cloudflareContextInNextDevSymbol];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export {
|
|
31
|
+
getCloudflareContext
|
|
32
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface CloudflareEnv {
|
|
3
|
+
}
|
|
4
|
+
}
|
|
5
|
+
type CloudflareContext<CfProperties extends Record<string, unknown> = IncomingRequestCfProperties, Context = ExecutionContext> = {
|
|
6
|
+
/**
|
|
7
|
+
* the worker's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/)
|
|
8
|
+
*/
|
|
9
|
+
env: CloudflareEnv;
|
|
10
|
+
/**
|
|
11
|
+
* the request's [cf properties](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties)
|
|
12
|
+
*/
|
|
13
|
+
cf: CfProperties | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* the current [execution context](https://developers.cloudflare.com/workers/runtime-apis/context)
|
|
16
|
+
*/
|
|
17
|
+
ctx: Context;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Utility to get the current Cloudflare context
|
|
21
|
+
*
|
|
22
|
+
* @returns the cloudflare context
|
|
23
|
+
*/
|
|
24
|
+
declare function getCloudflareContext<CfProperties extends Record<string, unknown> = IncomingRequestCfProperties, Context = ExecutionContext>(): Promise<CloudflareContext<CfProperties, Context>>;
|
|
25
|
+
|
|
26
|
+
export { type CloudflareContext, getCloudflareContext };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { CloudflareContext, getCloudflareContext } from './get-cloudflare-context.mjs';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const RSC_PREFETCH_SUFFIX = ".prefetch.rsc";
|
|
2
|
+
export const RSC_SUFFIX = ".rsc";
|
|
3
|
+
export const NEXT_DATA_SUFFIX = ".json";
|
|
4
|
+
export const NEXT_META_SUFFIX = ".meta";
|
|
5
|
+
export const NEXT_BODY_SUFFIX = ".body";
|
|
6
|
+
export const NEXT_HTML_SUFFIX = ".html";
|
|
7
|
+
|
|
8
|
+
export const SEED_DATA_DIR = "cdn-cgi/_cf_seed_data";
|