|
2 | 2 |
|
3 | 3 | Deploy Next.js apps to Cloudflare!
|
4 | 4 |
|
5 |
| -[OpenNext for Cloudflare](https://opennext.js.org/cloudflare) is Cloudflare specific adapter that enables deployment of Next.js applications to Cloudflare. |
| 5 | +[OpenNext for Cloudflare](https://opennext.js.org/cloudflare) is an adapter that enables the deployment of Next.js applications to Cloudflare's developer platform. |
6 | 6 |
|
7 |
| -## Getting started |
| 7 | +## Get started |
8 | 8 |
|
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: |
10 |
| - |
11 |
| -## Configure your app |
12 |
| - |
13 |
| -- add the following `devDependencies` to the `package.json`: |
14 |
| - |
15 |
| - ```bash |
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 |
23 |
| - ``` |
24 |
| - |
25 |
| -- add a `wrangler.toml` at the root of your project |
26 |
| - |
27 |
| - ```toml |
28 |
| - #:schema node_modules/wrangler/config-schema.json |
29 |
| - name = "<your-app-name>" |
30 |
| - main = ".worker-next/index.mjs" |
31 |
| - |
32 |
| - compatibility_date = "2024-09-23" |
33 |
| - compatibility_flags = ["nodejs_compat"] |
34 |
| - |
35 |
| - # Use the new Workers + Assets to host the static frontend files |
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 |
82 |
| - ``` |
83 |
| - |
84 |
| -- Preview the app in Wrangler |
85 |
| - |
86 |
| - ```bash |
87 |
| - npx wrangler dev |
88 |
| - # or |
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 |
110 |
| - ``` |
| 9 | +Visit the [OpenNext docs](https://opennext.js.org/cloudflare/get-started) for instructions on starting a new project, or migrating an existing one. |
0 commit comments