docs(examples): Expanded AI example with rate limit by user ID (#221)

Improvements to the Next.js example apps:

- Added an example for rate limiting by custom user ID.
- Improved the comments throughout the example.
- Added an environment var type definition to avoid TS complaining.
- Includes a new example to [submit to the Next.js repo](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md). Maintaining a copy of the code here so we can keep track of all the example apps we create.

examples/nextjs-13-pages-wrap/.env.local.example

@@ -0,0 +1 @@
+ARCJET_KEY=

examples/nextjs-13-pages-wrap/README.md

@@ -25,11 +25,7 @@ Route](https://nextjs.org/docs/pages/building-your-application/routing/api-route
    npm ci
    ```
 
-3. Add your Arcjet key to `.env.local`
-
-   ```env
-   ARCJET_KEY=
-   ```
+3. Rename `.env.local.example` to `.env.local` and add your Arcjet key.
 
 4. Start the dev server.
 

examples/nextjs-13-pages-wrap/environment.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+    export interface ProcessEnv {
+        readonly ARCJET_KEY: string;
+    }
+}

examples/nextjs-13-pages-wrap/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  // Disabled due to errors when building. See
+  // https://nextjs.org/docs/messages/failed-loading-swc
+  swcMinify: false,
 }
 
-module.exports = nextConfig
+module.exports = nextConfig

examples/nextjs-13-pages-wrap/pages/api/arcjet-edge.ts

@@ -10,14 +10,16 @@ const aj = arcjet({
   // Get your site key from https://app.arcjet.com
   // and set it as an environment variable rather than hard coding.
   // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
-  key: process.env.ARCJET_KEY!,
+  key: process.env.ARCJET_KEY,
   rules: [
+    // Fixed window rate limit. Arcjet also supports sliding window and token
+    // bucket.
     fixedWindow({
-      mode: "LIVE",
+      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
       // Limiting by ip.src is the default if not specified
       //characteristics: ["ip.src"],
-      window: "1m",
-      max: 1,
+      window: "1m", // 1 min fixed window
+      max: 1, // allow a single request (for demo purposes)
     }),
   ],
 });

examples/nextjs-13-pages-wrap/pages/api/arcjet.ts

@@ -6,14 +6,16 @@ const aj = arcjet({
   // Get your site key from https://app.arcjet.com
   // and set it as an environment variable rather than hard coding.
   // See: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
-  key: process.env.ARCJET_KEY!,
+  key: process.env.ARCJET_KEY,
   rules: [
+    // Fixed window rate limit. Arcjet also supports sliding window and token
+    // bucket.
     fixedWindow({
-      mode: "LIVE",
+      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
       // Limiting by ip.src is the default if not specified
       //characteristics: ["ip.src"],
-      window: "1m",
-      max: 1,
+      window: "1m", // 1 min fixed window
+      max: 1, // allow a single request (for demo purposes)
     }),
   ],
 });

examples/nextjs-14-app-dir-rl/.env.local.example

@@ -0,0 +1 @@
+ARCJET_KEY=

examples/nextjs-14-app-dir-rl/README.md

@@ -25,11 +25,7 @@ handler](https://nextjs.org/docs/app/building-your-application/routing/route-han
    npm ci
    ```
 
-3. Add your Arcjet key to `.env.local`
-
-   ```env
-   ARCJET_KEY=
-   ```
+3. Rename `.env.local.example` to `.env.local` and add your Arcjet key.
 
 4. Start the dev server.
 

examples/nextjs-14-app-dir-rl/app/api/arcjet/route.ts

@@ -7,11 +7,14 @@ const aj = arcjet({
   // See: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
   key: process.env.ARCJET_KEY!,
   rules: [
+    // Fixed window rate limit. Arcjet also supports sliding window and token
+    // bucket.
     fixedWindow({
-      mode: "LIVE",
-      characteristics: ["ip.src"],
-      window: "1h",
-      max: 1,
+      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
+      // Limiting by ip.src is the default if not specified
+      //characteristics: ["ip.src"],
+      window: "1m", // 1 min fixed window
+      max: 1, // allow a single request (for demo purposes)
     }),
   ],
 });

examples/nextjs-14-app-dir-rl/app/api/custom_timeout/route.ts

@@ -17,8 +17,8 @@ const aj = arcjet({
   key: process.env.ARCJET_KEY!,
   rules: [
     validateEmail({
-      mode: "LIVE",
-      block: ["NO_MX_RECORDS"],
+      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
+      block: ["NO_MX_RECORDS"], // block email addresses with no MX records
     }),
   ],
   client,

examples/nextjs-14-app-dir-rl/environment.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+    export interface ProcessEnv {
+        readonly ARCJET_KEY: string;
+    }
+}