Skip to content

Commit 6d4b9c5

Browse files
sommeeeerconico974
andauthored
refactor: full example, reference and nx (#78)
Co-authored-by: conico974 <[email protected]>
1 parent b77a1d0 commit 6d4b9c5

File tree

3 files changed

+173
-71
lines changed

3 files changed

+173
-71
lines changed

pages/aws/config/full_example.mdx

Lines changed: 122 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
1-
Here is a detailed example of an `open-next.config.ts` file:
2-
This file need to be at the same place as your `next.config.js` file
1+
Here is a detailed example of an `open-next.config.ts` file. This file need to be at the same place as your `next.config.js` file
32

4-
`server` in here could refer to a lambda function, a docker container, a node server or whatever that can support running nodejs code. (Even cloudflare workers in the future)
3+
`server` in here could refer to a lambda function, a docker container, a node server or whatever that can support running nodejs code. Even Cloudflare workers (require to use `@opennextjs/cloudflare`).
54

6-
For more information about the options here, take a look at the [components section](/aws/components/overview).
5+
For more information about the options here, take a look at the [reference section](/aws/config/reference).
76

87
```ts
9-
import type { OpenNextConfig } from '@opennextjs/aws/types/open-next.js'
8+
import type { OpenNextConfig } from '@opennextjs/aws/types/open-next';
109
const config = {
11-
default: { // This is the default server, similar to the server-function in open-next v2
10+
default: {
11+
// This is the default server, similar to the server-function in open-next v2
1212
// You don't have to provide the below, by default it will generate an output
1313
// for normal lambda as in open-next v2
1414
override: {
15-
wrapper: "aws-lambda-streaming", // This is necessary to enable lambda streaming
15+
// This is necessary to enable lambda streaming, defaults to aws-lambda
16+
wrapper: 'aws-lambda-streaming',
17+
// Convert the input and output of the server, defaults to aws-apigw-v2
18+
converter: 'aws-apigw-v2',
19+
// Used for fetch cache and html/rsc/json cache, defaults to s3
20+
incrementalCache: 's3',
21+
// Used for external rewrites, defaults to node
22+
proxyExternalRequest: 'node',
23+
tagCache: 'dynamodb', // Used for revalidatePath and revalidateTag, defaults to dynamodb
1624
// You can override any part that is a `LazyLoadedOverride` this way
17-
queue: () => Promise.resolve({
18-
send: async (message) => {
19-
//Your custom code here
20-
}
21-
})
25+
queue: () =>
26+
Promise.resolve({
27+
send: async (message) => {
28+
//Your custom code here
29+
},
30+
}),
31+
},
32+
// this will install sharp to your default server function
33+
// only for example purposes, you most likely should not use this
34+
// this can be used on every server to install additional packages
35+
install: {
36+
packages: ['[email protected]'],
37+
arch: 'arm64',
2238
},
2339
minify: true, // This will minify the output
2440
},
@@ -27,36 +43,44 @@ const config = {
2743
functions: {
2844
ssr: {
2945
routes: [
30-
"app/api/isr/route", "app/api/sse/route", "app/api/revalidateTag/route", // app dir Api routes
31-
"app/route1/page", "app/route2/page", // app dir pages
32-
"pages/route3" // page dir pages
33-
], // For app dir, you need to include route|page, no need to include layout or loading
34-
patterns: ['api/*', 'route1', 'route2', 'route3'], // patterns needs to be in a cloudfront compatible format, this will be used to generate the output
46+
'app/api/isr/route',
47+
'app/api/sse/route',
48+
'app/api/revalidateTag/route', // app dir Api routes
49+
'app/route1/page',
50+
'app/route2/page', // app dir pages
51+
'pages/route3', // page dir pages
52+
], // For app dir, you need to include route|page, no need to include layout or loading
53+
// patterns needs to be in a cloudfront compatible format
54+
// this will be used to generate the output
55+
patterns: ['api/*', 'route1', 'route2', 'route3'],
3556
override: {
36-
wrapper: "aws-lambda-streaming",
57+
wrapper: 'aws-lambda-streaming',
3758
},
3859
// This enables the bundled next server which is faster and reduce the size of the server
3960
// This is also experimental and might not work in all cases
40-
experimentalBundledNextServer: true
61+
experimentalBundledNextServer: true, // deprecated and not supported in next 14.2+
4162
},
4263
pageSsr: {
43-
routes: ["pages/pageSsr"], // For page dir routes should be in the form `pages/${route}` without the extension, it should match the filesystem
64+
// For page dir routes should be in the form `pages/${route}` without the extension
65+
// It should match the filesystem
66+
routes: ['pages/pageSsr'],
4467
// BUILD_ID is a special case, it will be replaced with the actual build id
45-
patterns: [ 'pageSsr', "_next/data/BUILD_ID/pageSsr.json"],
68+
patterns: ['pageSsr', '_next/data/BUILD_ID/pageSsr.json'],
4669
override: {
47-
wrapper: "node",
48-
converter: "node",
49-
// This is necessary to generate the dockerfile and for the implementation to know that it needs to deploy on docker
70+
wrapper: 'node',
71+
converter: 'node',
72+
// This is necessary to generate the dockerfile and
73+
// for the implementation to know that it needs to deploy on docker
5074
// You can also provide a string here which will be used to create the dockerfile
5175
generateDockerfile: true,
5276
},
5377
},
5478
edge: {
55-
runtime: "edge",
56-
routes: ["app/ssr/page"],
57-
patterns: ["ssr"],
58-
override: {}
59-
}
79+
runtime: 'edge',
80+
routes: ['app/ssr/page'],
81+
patterns: ['ssr'],
82+
override: {},
83+
},
6084
},
6185
// By setting this, it will create another bundle for the middleware,
6286
// and the middleware will be deployed in a separate server.
@@ -66,19 +90,48 @@ const config = {
6690
// This is not implemented in the reference construct implementation.
6791
// This is optional, but might be necessary if you split your app into multiple servers
6892
middleware: {
69-
external: true
70-
}
71-
93+
external: true,
94+
},
7295
// Optional
7396
imageOptimization: {
74-
// This is the architecture of the image, it could be x64 or arm64
97+
loader: "s3-lite", // Can be overridden with a LazyLoadedOverride
7598
// This is necessary to bundle the proper version of sharp
76-
arch: "x64",
77-
}
78-
99+
// You can customize this to your needs
100+
// By default it will install with these options:
101+
install: {
102+
packages: ['[email protected]'],
103+
arch: 'arm64',
104+
nodeVersion: '18',
105+
libc: 'glibc',
106+
},
107+
},
108+
// Initialization function is a special server that will run at build time to initialize the cache.
109+
// By default, it only initializes the tag cache. Besides the common options, you can use the following options:
110+
initializationFunction: {
111+
tagCache: 'dynamodb-lite', // Can be overridden with a LazyLoadedOverride
112+
},
113+
// Override the default revalidate function
114+
// By default, works for lambda and on SQS event.
115+
// Supports only node runtime
116+
revalidate: {
117+
override: {
118+
wrapper: 'aws-lambda', // Can be overridden with a LazyLoadedOverride
119+
converter: 'aws-apigw-v2', // Can be overridden with a LazyLoadedOverride
120+
},
121+
},
122+
// Override the default warmer
123+
// By default, works for lambda only.
124+
// If you override this, you'll need to handle the warmer event in the wrapper
125+
warmer: {
126+
invokeFunction: 'aws-lambda', // Can be overridden with a LazyLoadedOverride
127+
override: {
128+
wrapper: 'aws-lambda', // Can be overridden with a LazyLoadedOverride
129+
converter: 'aws-apigw-v2', // Can be overridden with a LazyLoadedOverride
130+
},
131+
},
79132
// If you want to override the default build command, you can do it here
80133
// By default it uses `npm run build`
81-
buildCommand: "echo 'hello world'",
134+
buildCommand: "echo 'skipping build'",
82135

83136
dangerous: {
84137
// This will disable the tag cache
@@ -87,19 +140,38 @@ const config = {
87140
// This will disable the incremental cache
88141
// This is generally not recommended, as this is necessary for ISR AND SSG routes as well as the fetch cache
89142
disableIncrementalCache: true,
90-
}
91-
92-
//The path to the target folder of build output from the `buildCommand` option (the path which will contain the `.next` and `.open-next` folders). This path is relative from the current process.cwd() - Optional default to "."
93-
buildOutputPath: "build",
94-
95-
//The path to the root of the Next.js app's source code. This path is relative from the current process.cwd(). - Optional default to "."
96-
appPath: "app",
97-
98-
//The path to the package.json file of the Next.js app. This path is relative from the current process.cwd(). - Optional
99-
packageJsonPath: "package.json",
100-
101-
} satisfies OpenNextConfig
143+
// Enable the cache interception. Every request will go through the cache interceptor, if it is found in the cache,
144+
// it will be returned without going through NextServer. Not every feature is covered by the cache interceptor and
145+
// it should fallback to the NextServer if the cache is not found.
146+
enableCacheInterception: true,
147+
// Function to determine which headers or cookies takes precedence.
148+
// By default, the middleware headers and cookies will override the handler headers and cookies.
149+
// This is executed for every request and after next config headers and middleware has executed.
150+
// Here is a very simple example of how you can use it:
151+
headersAndCookiesPriority: (event) => {
152+
if (event.rawPath.startsWith('/api')) {
153+
return 'middleware';
154+
}
155+
return 'handler';
156+
},
157+
},
158+
// The path to the target folder of build output from the `buildCommand` option
159+
// (the path which will contain the `.next` and `.open-next` folders).
160+
// This path is relative from the current process.cwd() - Optional defaults to "."
161+
buildOutputPath: 'build',
162+
// The path to the root of the Next.js app's source code.
163+
// This path is relative from the current process.cwd(). - Optional defaults to "."
164+
appPath: 'app',
165+
// The path to the package.json file of the Next.js app.
166+
// This path is relative from the current process.cwd(). - Optional
167+
packageJsonPath: 'package.json',
168+
// Advanced usage
169+
// If you use the edge runtime somewhere (either with an external middleware or in the functions), we compile 2 versions of the open-next.config.ts file.
170+
// One for the node runtime and one for the edge runtime.
171+
// This option allows you to specify the externals for the edge runtime used in esbuild for the compilation of open-next.config.ts
172+
// It is especially useful if you use some custom overrides only in node
173+
edgeExternals: [],
174+
} satisfies OpenNextConfig;
102175

103176
export default config;
104-
export type Config = typeof config
105177
```

pages/aws/config/nx.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Configuring OpenNext for use in an Nx Monorepo.
2-
Here's a detailed exampled of how to add open-next + SST to an existing Nx workspace, with an existing NextJS application sitting at `apps/next-site`
2+
Here's a detailed exampled of how to add OpenNext + SST to an existing Nx workspace, with an existing NextJS application sitting at `apps/next-site`
33

4-
1. install `open-next`: `pnpm add —save-dev open-next`
4+
1. install `open-next`: `pnpm add —save-dev @opennextjs/aws`
55

66
2. Update your `apps/next-site/next.config.js` add `output: ‘standalone’`, and you want to add `experimental.outputFileTracingRoot`, it should look a little like this:
77
```javascript
@@ -35,9 +35,9 @@ const plugins = [
3535
module.exports = composePlugins(...plugins)(nextConfig);
3636
```
3737

38-
3. Create `open-next.config.js` inside your apps root directory, it should look a little something like this:
38+
3. Create `open-next.config.ts` inside your apps root directory, it should look a little something like this:
3939
```javascript
40-
import type { OpenNextConfig } from '@opennextjs/aws/types/open-next.js';
40+
import type { OpenNextConfig } from '@opennextjs/aws/types/open-next';
4141

4242
const config = {
4343
default: {},
@@ -122,7 +122,7 @@ now, when you run `nx open-next-build next-site`, nx will automatically build th
122122

123123
Now, we have a built app, ready to deploy, so how do we get it onto SST/AWS ? Good question!
124124

125-
We are using `sst ion` in this example. i will assume you have already have the cli installed, (if not, check here on how!)[https://ion.sst.dev/],
125+
We are using `sst ion` in this example. i will assume you have already have the cli installed, [if not, check here on how](https://sst.dev),
126126
but we will not use the SST cli to init this project, because it wants to add a package.json to your next app, and it will look like it's working, but you will end up with a big far server error (all because the package.json overrides whatever nx _thinks_ there should be, and it will miss a bunch of dependencies). we will instead manually set this up:
127127

128128
- let's add the sst package with `pnpm add sst@ion`, and the required packages for SST to work with AWS `pnpm add --save-dev aws-cdk-lib constructs @types/aws-lambda`

0 commit comments

Comments
 (0)