|
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