chore: Add docs for chaining Nosecone middleware

src/content/docs/nosecone/reference.mdx

@@ -71,7 +71,19 @@ import StaticOptOut from "@/snippets/nosecone/reference/next-js/StaticOptOut.mdx
 
 <StaticOptOut />
 
-Additional resources:
+### Chaining middleware
+
+If you are using multiple Next.js middleware functions, you can chain them
+together to add the security headers.
+
+This example shows how to chain Arcjet with [Auth.js](https://authjs.dev)
+middleware:
+
+import ChainedMiddleware from "@/snippets/nosecone/reference/next-js/ChainedMiddleware.mdx";
+
+<ChainedMiddleware />
+
+### Additional resources
 
 - [Next.js Content-Security-Policy guide](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy)
 

src/snippets/nosecone/quick-start/next-js/Step2.mdx

@@ -1,4 +1,4 @@
-import { Code } from "@astrojs/starlight/components";
+import { Aside, Code } from "@astrojs/starlight/components";
 import SelectableContent from "@/components/SelectableContent";
 
 import Step2MiddlewareTS from "./Step2Middleware.ts?raw";
@@ -12,12 +12,6 @@ import Step2LayoutNoCacheJS from "./Step2LayoutNoCache.js?raw";
 Nosecone applies headers to all your routes via middleware in your Next.js
 application.
 
-:::note
-We recommend you remove any `export const config = ...` from your middleware so
-Nosecone will run on every route. This ensures the headers are applied to all
-requests.
-:::
-
 <SelectableContent client:load syncKey="language" frameworkSwitcher>
   <div slot="TS" slotIdx="1">
     <Code code={Step2MiddlewareTS} lang="ts" title="middleware.ts" />
@@ -27,6 +21,10 @@ requests.
   </div>
 </SelectableContent>
 
+We recommend you remove any `export const config = ...` from your middleware so
+Nosecone will run on every route. This ensures the headers are applied to all
+requests.
+
 You also need to opt-out of static generation in your application. See the
 `@nosecone/next` [reference
 guide](/nosecone/reference#nextjs-security-headers-middleware) for more details
@@ -68,3 +66,12 @@ To opt-out of static generation, modify your layout file with the following:
     />
   </div>
 </SelectableContent>
+
+We recommend you remove any `export const config = ...` from your middleware so
+Nosecone will run on every route. This ensures the headers are applied to all
+requests.
+
+<Aside type="note" title="Chaining middleware">
+  See the [reference guide](/nosecone/reference#chaining-middleware) if you need
+  to chain multiple middleware functions.
+</Aside>

src/snippets/nosecone/reference/next-js/ChainedMiddleware.js

@@ -0,0 +1,27 @@
+import { createMiddleware, defaults } from "@nosecone/next";
+import { auth } from "./auth";
+
+// Nosecone security headers configuration
+// https://docs.arcjet.com/nosecone/quick-start
+const noseconeOptions = {
+  ...defaults,
+};
+
+const securityHeaders = createMiddleware(noseconeOptions);
+
+// @ts-ignore: This type will be correct when used in a real app
+export default auth(async (req) => {
+  // Redirect to signin page if not authenticated
+  // Example from https://authjs.dev/getting-started/session-management/protecting
+  if (!req.auth && !req.nextUrl.pathname.startsWith("/auth")) {
+    const newUrl = new URL("/auth/signin", req.nextUrl.origin);
+    return Response.redirect(newUrl);
+  }
+
+  // Otherwise return security headers
+  return securityHeaders();
+});
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};

src/snippets/nosecone/reference/next-js/ChainedMiddleware.mdx

@@ -0,0 +1,14 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import ChainedMiddlewareTS from "./ChainedMiddleware.ts?raw";
+import ChainedMiddlewareJS from "./ChainedMiddleware.js?raw";
+
+<SelectableContent client:load syncKey="language">
+  <div slot="TS" slotIdx="1">
+    <Code code={ChainedMiddlewareTS} lang="ts" title="middleware.ts" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={ChainedMiddlewareJS} lang="js" title="middleware.js" />
+  </div>
+</SelectableContent>

src/snippets/nosecone/reference/next-js/ChainedMiddleware.ts

@@ -0,0 +1,32 @@
+import {
+  type NoseconeOptions,
+  createMiddleware,
+  defaults,
+} from "@nosecone/next";
+// @ts-ignore: Import your auth library. See https://authjs.dev
+import { auth } from "./auth";
+
+// Nosecone security headers configuration
+// https://docs.arcjet.com/nosecone/quick-start
+const noseconeOptions: NoseconeOptions = {
+  ...defaults,
+};
+
+const securityHeaders = createMiddleware(noseconeOptions);
+
+// @ts-ignore: This type will be correct when used in a real app
+export default auth(async (req) => {
+  // Redirect to signin page if not authenticated
+  // Example from https://authjs.dev/getting-started/session-management/protecting
+  if (!req.auth && !req.nextUrl.pathname.startsWith("/auth")) {
+    const newUrl = new URL("/auth/signin", req.nextUrl.origin);
+    return Response.redirect(newUrl);
+  }
+
+  // Otherwise return security headers
+  return securityHeaders();
+});
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};