diff --git a/docs/proxy/guides/cloudfront.md b/docs/proxy/guides/cloudfront.md
index f89832c1..f41e7c8d 100644
--- a/docs/proxy/guides/cloudfront.md
+++ b/docs/proxy/guides/cloudfront.md
@@ -9,9 +9,9 @@ First we need to create a new origin pointing to the Plausible server. In the Cl
- Origin Domain Name: `plausible.io`
- Origin Protocol Policy: `HTTPS Only`
-## Step 2: Create custom behaviours
+## Step 2: Create custom behaviors
-Now we need to define some custom behaviour for when to use our new origin. In the CloudFront console, under your distribution; create new behaviour.
+Now we need to define some custom behavior for when to use our new origin. In the CloudFront console, under your distribution; create new behavior.
First for the analytics script:
@@ -30,7 +30,7 @@ And another for the event API:
## Step 3: Adjust your deployed script
-With the custom origin and behaviours in place, you can change your script tag as follows:
+With the custom origin and behaviors in place, you can change your script tag as follows:
```html
@@ -41,4 +41,96 @@ Deploy these changes to your CloudFront site. You can verify the proxy is workin
Using our extensions such as hash-based routing, page exclusions or outbound link click tracking? Change the file name from script.js to the script you want to use: script.hash.js, script.exclusions.js or script.outbound-links.js. Want to use more than one extension? You can chain them like this: script.hash.exclusions.outbound-links.js.
-Thanks to [@thomasjsn](https://github.com/thomasjsn) for contributing these instructions!
+# Using Cloudfront with Nextjs
+If your Nextjs site is deployed to AWS Cloudfront with OpenNext:
+
+## Step 1: Create new origin
+Create a new origin in your stack using aws-cdk-lib.
+```
+import { HttpOrigin } from "aws-cdk-lib/aws-cloudfront-origins"
+
+const plausibleOrigin = new HttpOrigin("plausible.io", {
+ protocolPolicy: OriginProtocolPolicy.HTTPS_ONLY,
+})
+```
+
+## Step 2: Add custom behaviors
+We need to modify our NextjsSite Cloudfront distribution to include the behaviors shown above. Here we are modifying an SST NextjsSite construct.
+
+
+>Note that our `/api/event` custom behavior has been renamed to `/plausible/event`
+
+The event path `/api/event` conflicts with the `/api*` path created by OpenNext in our Cloudfront distribution so we use a different path name.
+
+```
+import {
+ ViewerProtocolPolicy,
+ OriginRequestPolicy,
+ AllowedMethods,
+ OriginProtocolPolicy,
+} from "aws-cdk-lib/aws-cloudfront"
+
+const site = new NextjsSite(stack, "site", {
+ cdk: {
+ distribution: {
+ additionalBehaviors: {
+ "/js/script.js": {
+ origin: plausibleOrigin
+ viewerProtocolPolicy: ViewerProtocolPolicy.HTTPS_ONLY,
+ },
+ "/plausible/event": {
+ origin: plausibleOrigin
+ originRequestPolicy: new OriginRequestPolicy(
+ stack,
+ "Managed-UserAgentRefererHeaders"
+ ),
+ allowedMethods: AllowedMethods.ALLOW_ALL,
+ viewerProtocolPolicy: ViewerProtocolPolicy.HTTPS_ONLY,
+ },
+ },
+ },
+ },
+})
+```
+
+
+## Step 3: Replace the path name to `/api/event`
+Plausible requires our events to be sent to `/api/event` but are currently routed to `/plausible/event`
+- Create a Cloudfront function that replaces `/plausible/event` with `/api/event`
+```
+import * as cloudfront from "aws-cdk-lib/aws-cloudfront"
+
+const cfFunction = new cloudfront.Function(stack, "Function", {
+ code: cloudfront.FunctionCode.fromInline(
+ `function handler(event) {
+ var request = event.request;
+ var uri = request.uri;
+ uri = uri.replace('/plausible/event', '/api/event');
+ request.uri = uri;
+ return request;
+ }`
+ ),
+})
+```
+
+- Add the Cloudfront function to the `"/plausible/event"` behavior created in Step 2
+```
+"/plausible/event": {
+ ... other behaviors,
+ functionAssociations: [
+ {
+ function: cfFunction,
+ eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
+ },
+ ],
+},
+```
+
+## Step 4: Adjust your deployed script
+- Add `data-api="/plausible/event"` to your frontend script to overwrite the default event path
+```
+
+```
+Deploy your Nextjs site and verify your proxy is working by opening your network tab. You should see a request to `https://yourdomain.com/js/script.js` with status 200 and another one to `https://yourdomain.com/plausible/event` with status 202.
+
+Thanks to [@thomasjsn](https://github.com/thomasjsn) and [@gty3](https://github.com/gty3) for contributing these instructions!