You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
OpenNext takes the Next.js build output and converts it into a package that can be deployed to any functions as a service platform.
9
17
@@ -23,38 +31,38 @@ OpenNext aims to support all Next.js 13 features. Some features are work in prog
23
31
24
32
1. Naviate to your Next.js app
25
33
26
-
```bash
27
-
cd my-next-app
28
-
```
34
+
```bash
35
+
cd my-next-app
36
+
```
29
37
30
38
2. Ensure [standalone output](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files) is enabled in your `next.config.js`:
31
39
32
-
```diff
33
-
/** @type {import('next').NextConfig} */
34
-
const nextConfig = {
35
-
+ output: "standalone"
36
-
reactStrictMode: true,
37
-
swcMinify: true,
38
-
}
40
+
```diff
41
+
/** @type {import('next').NextConfig} */
42
+
const nextConfig = {
43
+
+ output: "standalone"
44
+
reactStrictMode: true,
45
+
swcMinify: true,
46
+
}
39
47
40
-
module.exports = nextConfig
41
-
```
48
+
module.exports = nextConfig
49
+
```
42
50
43
-
3. Build app
51
+
3. Build the app
44
52
45
-
```bash
46
-
npx open-next build
47
-
```
53
+
```bash
54
+
npx open-next build
55
+
```
48
56
49
-
This will generate an `.open-next` directory with the following bundles:
57
+
This will generate an `.open-next` directory with the following bundles:
50
58
51
-
```bash
52
-
my-next-app/
53
-
.open-next/
54
-
assets/ -> Static assets to upload to an S3 Bucket
55
-
server-function/ -> Handler code for server Lambda Function
56
-
middleware-function/ -> Handler code for middleware Lambda@Edge Function
57
-
```
59
+
```bash
60
+
my-next-app/
61
+
.open-next/
62
+
assets/ -> Static assets to upload to an S3 Bucket
63
+
server-function/ -> Handler code for server Lambda Function
64
+
middleware-function/ -> Handler code for middleware Lambda@Edge Function
65
+
```
58
66
59
67
## Recommeded infrastructure
60
68
@@ -63,10 +71,10 @@ OpenNext does not create the underlying infrastructure. You can create the infra
- An S3 bucket to host static assets from `.open-next/assets`.
72
80
- A Lambda function handling server and API requests.
@@ -76,15 +84,15 @@ A few AWS resources are created:
76
84
77
85
## How does OpenNext work?
78
86
79
-
When you call `npx open-next build`, behind the scene OpenNext builds your Next.js app using the `@vercel/next` package. This package does 2 things:
87
+
When you call `npx open-next build`, behind the scenes OpenNext builds your Next.js app using the `@vercel/next` package. This package does 2 things:
80
88
81
89
- It calls `next build` with the [`minimalMode`](https://github.com/vercel/next.js/discussions/29801) flag. This flag disables running middleware in the server code.
82
90
83
91
- Instead, it bundles the middleware separately. This allows us to deploy middleware to edge locations.
84
92
85
93
Then `open-next` transforms `@vercel/next`'s build output into a format that can be deployed to AWS. The following steps are performed:
86
94
87
-
1. Creates a `.open-next` directory in user's Next.js app.
95
+
1. Creates a `.open-next` directory in the user's Next.js app.
88
96
89
97
1. Bundles the middleware handler with the [middleware adapter](/cli/assets/middleware-adapter.js). And outputs the handler file into `.open-next/middleware-function`.
90
98
@@ -98,7 +106,7 @@ Then `open-next` transforms `@vercel/next`'s build output into a format that can
98
106
99
107
## Example
100
108
101
-
In the `example` folder, you can find a benchmark Next.js app. Here is a link deployed using SST's [`NextjsSite`](https://docs.sst.dev/constructs/NextjsSite) construct. It contains a handful of pages. Each page aims to test a single Next.js feature.
109
+
In the `example` folder, you can find a benchmark Next.js app. Here's a link deployed using SST's [`NextjsSite`](https://docs.sst.dev/constructs/NextjsSite) construct. It contains a handful of pages. Each page aims to test a single Next.js feature.
102
110
103
111
## Debugging
104
112
@@ -114,8 +122,12 @@ Create a PR and add a new page to the benchmark app in `example` with the issue.
114
122
115
123
#### Why use the `@vercel/next` package for building the Next.js app?
116
124
117
-
`next build` generates a server function that runs middleware. With this setup, if you use middleware for static pages, these pages cannot be cached. If cached, CDN (CloudFront) will send back cached response without calling the origin (server Lambda function). To ensure the middleware is invoked on every request, caching is always disabled.
125
+
The `next build`command generates a server function that runs the middleware. With this setup, if you use middleware for static pages, these pages cannot be cached. If cached, CDN (CloudFront) will send back the cached response without calling the origin (server Lambda function). To ensure the middleware is invoked on every request, caching is always disabled.
118
126
119
-
Vercel deploys the middleware code to edge functions, which gets invoked before the request reaches the CDN. This way, static pages can be cached. On request, middleware gets called, and then the CDK can send back cached response.
127
+
Vercel deploys the middleware code to edge functions, which gets invoked before the request reaches the CDN. This way, static pages can be cached. On request, the middleware gets called, and then the CDN can send back the cached response.
120
128
121
129
OpenNext is designed to adopt the same setup as Vercel. And building using `@vercel/next` allows us to separate the middleware code from the server code.
0 commit comments