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
- An S3 bucket to host static assets from `.open-next/assets`.
77
77
- A Lambda function handling server and API requests.
@@ -81,15 +81,15 @@ A few AWS resources are created:
81
81
82
82
## How does OpenNext work?
83
83
84
-
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:
84
+
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:
85
85
86
86
- 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.
87
87
88
88
- Instead, it bundles the middleware separately. This allows us to deploy middleware to edge locations.
89
89
90
90
Then `open-next` transforms `@vercel/next`'s build output into a format that can be deployed to AWS. The following steps are performed:
91
91
92
-
1. Creates a `.open-next` directory in user's Next.js app.
92
+
1. Creates a `.open-next` directory in the user's Next.js app.
93
93
94
94
1. Bundles the middleware handler with the [middleware adapter](/cli/assets/middleware-adapter.js). And outputs the handler file into `.open-next/middleware-function`.
95
95
@@ -103,7 +103,7 @@ Then `open-next` transforms `@vercel/next`'s build output into a format that can
103
103
104
104
## Example
105
105
106
-
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.
106
+
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.
107
107
108
108
## Debugging
109
109
@@ -119,12 +119,12 @@ Create a PR and add a new page to the benchmark app in `example` with the issue.
119
119
120
120
#### Why use the `@vercel/next` package for building the Next.js app?
121
121
122
-
`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.
122
+
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.
123
123
124
-
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.
124
+
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.
125
125
126
126
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