Update cloudfront.md to include Nextjs Cloudfront

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
 <script defer data-domain="yourdomain.com" src="/js/script.js"></script>
@@ -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
+```        
+<script defer data-domain="yourdomain.com" data-api="/plausible/event" src="/js/script.js"></script>
+```
+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!