diff --git a/env.d.ts b/env.d.ts
index 453e8a03..2b267ef4 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -11,3 +11,7 @@ declare module "npm:@arcjet/deno" {
   export * from "@arcjet/deno";
   export default arcjet;
 }
+
+declare module "npm:nosecone" {
+  export { default } from "nosecone";
+}
diff --git a/next-server.d.ts b/next-server.d.ts
new file mode 100644
index 00000000..4a93b637
--- /dev/null
+++ b/next-server.d.ts
@@ -0,0 +1,11 @@
+/**
+ * Augment the `next/server` module to fake the API differences between 14 & 15
+ */
+
+// Need to import next/server to augment it with `declare module`
+import "next/server";
+
+declare module "next/server" {
+  // Faking this because Next.js 14 doesn't have the `connection` export
+  export const connection: () => Promise<void>;
+}
diff --git a/package-lock.json b/package-lock.json
index 1395e248..4d828a40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,8 @@
         "@nestjs/config": "3.3.0",
         "@nestjs/core": "10.4.13",
         "@nestjs/platform-express": "10.4.13",
+        "@nosecone/next": "1.0.0-alpha.34",
+        "@nosecone/sveltekit": "1.0.0-alpha.34",
         "@remix-run/node": "2.15.0",
         "@sveltejs/kit": "2.9.0",
         "ai": "4.0.10",
@@ -57,6 +59,7 @@
         "nanostores": "0.11.3",
         "next": "14.2.15",
         "next-auth": "4.24.10",
+        "nosecone": "1.0.0-alpha.34",
         "openai-chat-tokens": "0.2.8",
         "pagefind": "1.2.0",
         "pino": "9.5.0",
@@ -3499,6 +3502,36 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nosecone/next": {
+      "version": "1.0.0-alpha.34",
+      "resolved": "https://registry.npmjs.org/@nosecone/next/-/next-1.0.0-alpha.34.tgz",
+      "integrity": "sha512-4KXgjR580QTsdbM/F9WoLR/AQxJD48na27XnS9De5LIFBemDZ5ObC6L901WrBF3EJGz1M0E9AFQ0nKGUh+ascQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "nosecone": "1.0.0-alpha.34"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "next": ">=14"
+      }
+    },
+    "node_modules/@nosecone/sveltekit": {
+      "version": "1.0.0-alpha.34",
+      "resolved": "https://registry.npmjs.org/@nosecone/sveltekit/-/sveltekit-1.0.0-alpha.34.tgz",
+      "integrity": "sha512-PkgVsYCkK1XrdkiKx57Uf6M7FK/XxQdB35rj8GScmZwiXcAnffPEndw/yepp4yNcetnm6u2ueuwUi8CuB04pwA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "nosecone": "1.0.0-alpha.34"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": ">=2"
+      }
+    },
     "node_modules/@nuxtjs/opencollective": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@nuxtjs/opencollective/-/opencollective-0.3.2.tgz",
@@ -11527,6 +11560,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/nosecone": {
+      "version": "1.0.0-alpha.34",
+      "resolved": "https://registry.npmjs.org/nosecone/-/nosecone-1.0.0-alpha.34.tgz",
+      "integrity": "sha512-GPqypMOeGXjZXHS+I9jTBFB12GNlAmC21LRRhAKuc4v2beMDzW/ChYSQ8sMSr0f7/Ov4ffQJH0i84iAny5Y5fg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/npmlog": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
diff --git a/package.json b/package.json
index e28ca0b2..90906188 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,8 @@
     "@nestjs/config": "3.3.0",
     "@nestjs/core": "10.4.13",
     "@nestjs/platform-express": "10.4.13",
+    "@nosecone/next": "1.0.0-alpha.34",
+    "@nosecone/sveltekit": "1.0.0-alpha.34",
     "@remix-run/node": "2.15.0",
     "@sveltejs/kit": "2.9.0",
     "ai": "4.0.10",
@@ -60,6 +62,7 @@
     "nanostores": "0.11.3",
     "next": "14.2.15",
     "next-auth": "4.24.10",
+    "nosecone": "1.0.0-alpha.34",
     "openai-chat-tokens": "0.2.8",
     "pagefind": "1.2.0",
     "pino": "9.5.0",
diff --git a/src/components/SDKVersionNosecone.astro b/src/components/SDKVersionNosecone.astro
new file mode 100644
index 00000000..3f1f1f67
--- /dev/null
+++ b/src/components/SDKVersionNosecone.astro
@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/nosecone?style=flat-square&label=%E2%9C%A6Aj%20Nosecone&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/nosecone?style=flat-square&label=%E2%9C%A6Aj%20Nosecone&labelColor=ECE6F0&color=ECE6F0">
+</picture>
\ No newline at end of file
diff --git a/src/components/SDKVersionNoseconeNext.astro b/src/components/SDKVersionNoseconeNext.astro
new file mode 100644
index 00000000..fbb9dd20
--- /dev/null
+++ b/src/components/SDKVersionNoseconeNext.astro
@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@nosecone/next?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/next&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/@nosecone/next?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/next&labelColor=ECE6F0&color=ECE6F0">
+</picture>
\ No newline at end of file
diff --git a/src/components/SDKVersionNoseconeSvelteKit.astro b/src/components/SDKVersionNoseconeSvelteKit.astro
new file mode 100644
index 00000000..ac3d6354
--- /dev/null
+++ b/src/components/SDKVersionNoseconeSvelteKit.astro
@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@nosecone/sveltekit?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/sveltekit&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/@nosecone/sveltekit?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/sveltekit&labelColor=ECE6F0&color=ECE6F0">
+</picture>
\ No newline at end of file
diff --git a/src/content/docs/nosecone/quick-start.mdx b/src/content/docs/nosecone/quick-start.mdx
new file mode 100644
index 00000000..9651be8e
--- /dev/null
+++ b/src/content/docs/nosecone/quick-start.mdx
@@ -0,0 +1,169 @@
+---
+title: "Arcjet Nosecone: Security headers for JS frameworks"
+description: "How to use the open source Arcjet Nosecone library to set security headers (CSP, HSTS, and others) in your Bun, Deno, Next.js, Node.js, or SvelteKit app."
+prev: false
+next: false
+frameworks:
+  - bun
+  - deno
+  - next-js
+  - node-js
+  - sveltekit
+ajToc:
+  - text: "Supported headers"
+    anchor: "supported-headers"
+  - text: "Quick start"
+    anchor: "quick-start"
+    children:
+      - text: 1. Install Nosecone
+        anchor: "1-install-nosecone"
+      - text: 2. Configure your application
+        anchor: "2-configure-your-application"
+      - text: 3. Run your application
+        anchor: "3-run-your-application"
+      - text: 4. Inspect the headers
+        anchor: "4-inspect-the-headers"
+  - text: "What next?"
+    anchor: "what-next"
+  - text: "Get help"
+    anchor: "get-help"
+---
+
+import WhatAreArcjetUtilities from "@/components/WhatAreArcjetUtilities.astro";
+import FrameworkName from "@/components/FrameworkName";
+import SDKVersionNosecone from "@/components/SDKVersionNosecone.astro";
+import SlotByFramework from "@/components/SlotByFramework";
+import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+import Comments from "/src/components/Comments.astro";
+
+import BunStep1 from "@/snippets/nosecone/quick-start/bun/Step1.mdx";
+import BunStep2 from "@/snippets/nosecone/quick-start/bun/Step2.mdx";
+import BunStep3 from "@/snippets/nosecone/quick-start/bun/Step3.mdx";
+import BunStep4 from "@/snippets/nosecone/quick-start/bun/Step4.mdx";
+
+import DenoStep1 from "@/snippets/nosecone/quick-start/deno/Step1.mdx";
+import DenoStep2 from "@/snippets/nosecone/quick-start/deno/Step2.mdx";
+import DenoStep3 from "@/snippets/nosecone/quick-start/deno/Step3.mdx";
+import DenoStep4 from "@/snippets/nosecone/quick-start/deno/Step4.mdx";
+
+import NextJsStep1 from "@/snippets/nosecone/quick-start/next-js/Step1.mdx";
+import NextJsStep2 from "@/snippets/nosecone/quick-start/next-js/Step2.mdx";
+import NextJsStep3 from "@/snippets/nosecone/quick-start/next-js/Step3.mdx";
+import NextJsStep4 from "@/snippets/nosecone/quick-start/next-js/Step4.mdx";
+
+import NodeJsStep1 from "@/snippets/nosecone/quick-start/node-js/Step1.mdx";
+import NodeJsStep2 from "@/snippets/nosecone/quick-start/node-js/Step2.mdx";
+import NodeJsStep3 from "@/snippets/nosecone/quick-start/node-js/Step3.mdx";
+import NodeJsStep4 from "@/snippets/nosecone/quick-start/node-js/Step4.mdx";
+
+import SvelteKitStep1 from "@/snippets/nosecone/quick-start/sveltekit/Step1.mdx";
+import SvelteKitStep2 from "@/snippets/nosecone/quick-start/sveltekit/Step2.mdx";
+import SvelteKitStep3 from "@/snippets/nosecone/quick-start/sveltekit/Step3.mdx";
+import SvelteKitStep4 from "@/snippets/nosecone/quick-start/sveltekit/Step4.mdx";
+
+[<SDKVersionNosecone/>](https://www.npmjs.com/package/nosecone)
+
+Arcjet Nosecone is an [open source library](https://github.com/arcjet/arcjet-js)
+that helps set security headers such as `Content-Security-Policy` (CSP),
+`Strict-Transport-Security` (HSTS), and `X-Content-Type-Options` in JS
+applications built with Bun, Deno, Next.js, Node.js, or SvelteKit.
+
+<WhatAreArcjetUtilities />
+
+## Supported headers
+
+Nosecone makes it easy to add and configure these headers:
+
+- `Content-Security-Policy` (CSP)
+- `Cross-Origin-Embedder-Policy` (COEP)
+- `Cross-Origin-Opener-Policy`
+- `Cross-Origin-Resource-Policy`
+- `Origin-Agent-Cluster`
+- `Referrer-Policy`
+- `Strict-Transport-Security` (HSTS)
+- `X-Content-Type-Options`
+- `X-DNS-Prefetch-Control`
+- `X-Download-Options`
+- `X-Frame-Options`
+- `X-Permitted-Cross-Domain-Policies`
+- `X-XSS-Protection`
+
+See the [reference guide](/nosecone/reference) for full details on each option.
+
+:::note
+If you are using Express, NestJS, or Remix we recommend using the excellent
+[Helmet](https://helmetjs.github.io/) library, which informed much of our work
+on Nosecone.
+:::
+
+## Quick start
+
+This guide will show you how to add our recommended <FrameworkName client:load/>
+default security headers.
+
+### 1. Install Nosecone
+
+In your project root, run the following command to install the Arcjet Nosecone
+library for your framework:
+
+<SlotByFramework client:load>
+  <BunStep1 slot="bun" />
+  <DenoStep1 slot="deno" />
+  <NextJsStep1 slot="next-js" />
+  <NodeJsStep1 slot="node-js" />
+  <SvelteKitStep1 slot="sveltekit" />
+</SlotByFramework>
+
+### 2. Configure your application
+
+<SlotByFramework client:load>
+  <BunStep2 slot="bun" />
+  <DenoStep2 slot="deno" />
+  <NextJsStep2 slot="next-js" />
+  <NodeJsStep2 slot="node-js" />
+  <SvelteKitStep2 slot="sveltekit" />
+</SlotByFramework>
+
+### 3. Run your application
+
+<SlotByFramework client:load>
+  <BunStep3 slot="bun" />
+  <DenoStep3 slot="deno" />
+  <NextJsStep3 slot="next-js" />
+  <NodeJsStep3 slot="node-js" />
+  <SvelteKitStep3 slot="sveltekit" />
+</SlotByFramework>
+
+### 4. Inspect the headers
+
+The default headers apply a pragmatic set of security headers to your
+application, but may break things (particularly the CSP header).
+
+We recommend you test your application thoroughly and tweak the settings to
+ensure it continues to work as expected.
+
+<SlotByFramework client:load>
+  <BunStep4 slot="bun" />
+  <DenoStep4 slot="deno" />
+  <NextJsStep4 slot="next-js" />
+  <NodeJsStep4 slot="node-js" />
+  <SvelteKitStep4 slot="sveltekit" />
+</SlotByFramework>
+
+## What next?
+
+<CardGrid>
+  <LinkCard
+    title="Nosecone reference"
+    href="/nosecone/reference"
+    description="Details about each security header and how to configure them."
+  ></LinkCard>
+</CardGrid>
+
+## Get help
+
+Need help with anything? Email support@arcjet.com to get support from our
+engineering team, [join our Discord](https://arcjet.com/discord), or [open an
+issue on GitHub](https://github.com/arcjet/arcjet-js).
+
+<Comments />
diff --git a/src/content/docs/nosecone/reference.mdx b/src/content/docs/nosecone/reference.mdx
new file mode 100644
index 00000000..8ac0a434
--- /dev/null
+++ b/src/content/docs/nosecone/reference.mdx
@@ -0,0 +1,636 @@
+---
+title: "Arcjet Nosecone reference"
+description: "Reference for the Nosecone library showing how to configure security headers (CSP, HSTS, and others) in your Bun, Deno, Next.js, Node.js, or SvelteKit app."
+---
+
+import SDKVersionNosecone from "@/components/SDKVersionNosecone.astro";
+import SDKVersionNoseconeNext from "@/components/SDKVersionNoseconeNext.astro";
+import SDKVersionNoseconeSvelteKit from "@/components/SDKVersionNoseconeSvelteKit.astro";
+import WhatAreArcjetUtilities from "@/components/WhatAreArcjetUtilities.astro";
+import SelectableContent from "@/components/SelectableContent";
+import DisplayType from "@/components/DisplayType.astro";
+
+[<SDKVersionNosecone/>](https://www.npmjs.com/package/nosecone)
+
+Arcjet Nosecone is an [open source library](https://github.com/arcjet/arcjet-js)
+that helps set security headers such as `Content-Security-Policy` (CSP),
+`Strict-Transport-Security` (HSTS), and `X-Content-Type-Options` in JS
+applications built with Bun, Deno, Next.js, Node.js, or SvelteKit.
+
+<WhatAreArcjetUtilities />
+
+## Quick start
+
+To get started, follow our [quick start guide](/nosecone/quick-start).
+
+## Next.js security headers middleware
+
+[<SDKVersionNoseconeNext/>](https://www.npmjs.com/package/@nosecone/next)
+
+Next.js security headers can be set using the `@nosecone/next` adapter.
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager">
+<div slot="npm" slotIdx="1">
+
+```sh
+npm i @nosecone/next
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm add @nosecone/next
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn add @nosecone/next
+```
+
+</div>
+</SelectableContent>
+
+This provides defaults to ensure Next.js applications work in production &
+development environments and the `createMiddleware(options?: NoseconeOptions)`
+API to create a Next.js middleware that runs on every request.
+
+import Middleware from "@/snippets/nosecone/reference/next-js/Middleware.mdx";
+
+<Middleware />
+
+If the `Content-Security-Policy` header is specified via middleware, Next.js
+will look for a `script-src` that starts with `nonce-` and apply it for each
+`<script>` generated by the framework. This requires that opting-out of static
+generation, which requires modifying your `Layout`:
+
+import StaticOptOut from "@/snippets/nosecone/reference/next-js/StaticOptOut.mdx";
+
+<StaticOptOut />
+
+Additional resources:
+
+- [Next.js Content-Security-Policy guide](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy)
+
+## SvelteKit security headers configuration
+
+[<SDKVersionNoseconeSvelteKit/>](https://www.npmjs.com/package/@nosecone/sveltekit)
+
+The `@nosecone/sveltekit` adapter provides defaults to ensure SvelteKit is
+configured correctly.
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm i @nosecone/sveltekit
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm add @nosecone/sveltekit
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn add @nosecone/sveltekit
+```
+
+</div>
+</SelectableContent>
+
+This also provides the `csp(options?: ContentSecurityPolicyConfig)` function
+to translate Nosecone configuration to SvelteKit configuration in
+`svelte.config.js`, and the `createHook(options?: NoseconeOptions)` function to
+create a SvelteKit hook that runs on every request.
+
+import SvelteKitConfig from "@/snippets/nosecone/reference/sveltekit/Config.mdx";
+
+<SvelteKitConfig />
+
+import SvelteKitHooks from "@/snippets/nosecone/reference/sveltekit/Hooks.mdx";
+
+<SvelteKitHooks />
+
+Additional resources:
+
+- [SvelteKit CSP configuration](https://svelte.dev/docs/kit/configuration#csp)
+
+## API
+
+### `nosecone(options?: NoseconeOptions): Headers`
+
+The default export is a function that returns a set of `Headers` to apply to a
+request that help you secure your application. The defaults should work for many
+applications, but all can be configured or disabled for specific requirements.
+
+### `NoseconeOptions`
+
+All entries in `NoseconeOptions` can be enabled with defaults by specifying
+`true` or disabled by specifying `false`. Additionally, many allow individual
+configuration via their own configuration objects, which override any defaults.
+
+You can use object spread, e.g. `...defaults`, to combine the default values
+with your overrides.
+
+```ts
+interface NoseconeOptions {
+  /**
+   * Configure the `Content-Security-Policy` header, which helps mitigate a
+   * large number of attacks, such as cross-site scripting.
+   */
+  contentSecurityPolicy?: ContentSecurityPolicyConfig | boolean;
+  /**
+   * Configure the `Cross-Origin-Embedder-Policy` header, which helps control
+   * what resources can be loaded cross-origin.
+   */
+  crossOriginEmbedderPolicy?: CrossOriginEmbedderPolicyConfig | boolean;
+  /**
+   * Configure the `Cross-Origin-Opener-Policy` header, which helps
+   * process-isolate your page.
+   */
+  crossOriginOpenerPolicy?: CrossOriginOpenerPolicyConfig | boolean;
+  /**
+   * Configure the `Cross-Origin-Resource-Policy` header, which blocks others
+   * from loading your resources cross-origin in some cases.
+   */
+  crossOriginResourcePolicy?: CrossOriginResourcePolicyConfig | boolean;
+  /**
+   * Configure the `Origin-Agent-Cluster` header, which provides a mechanism to
+   * allow web applications to isolate their origins from other processes.
+   */
+  originAgentCluster?: boolean;
+  /**
+   * Configure the `Referrer-Policy` header, which controls what information is
+   * set in the `Referer` request header.
+   */
+  referrerPolicy?: ReferrerPolicyConfig | boolean;
+  /**
+   * Configure the `Strict-Transport-Security` header, which tells browsers to
+   * prefer HTTPS instead of insecure HTTP.
+   */
+  strictTransportSecurity?: StrictTransportSecurityConfig | boolean;
+  /**
+   * Configure the `X-Content-Type-Options` header, which helps mitigate MIME
+   * type sniffing that can cause security issues.
+   */
+  xContentTypeOptions?: boolean;
+  /**
+   * Configure the `X-DNS-Prefetch-Control` header, which helps control DNS
+   * prefetching to improve user privacy at the expense of performance.
+   */
+  xDnsPrefetchControl?: DnsPrefetchControlConfig | boolean;
+  /**
+   * Configure the `X-Download-Options` header, which prevents a user from
+   * opening a file directly in Internet Explorer 8 to avoid prevent script
+   * injection.
+   */
+  xDownloadOptions?: boolean;
+  /**
+   * Configure the `X-Frame-Options` header, which helps mitigate clickjacking
+   * attacks in legacy browsers. This header is superceded by a directive in the
+   * `Content-Security-Policy` header.
+   */
+  xFrameOptions?: FrameOptionsConfig | boolean;
+  /**
+   * Configure the `X-Permitted-Cross-Domain-Policies` header, which tells some
+   * clients, like Adobe products, your domain's policy for loading cross-domain
+   * content.
+   */
+  xPermittedCrossDomainPolicies?: PermittedCrossDomainPoliciesConfig | boolean;
+  /**
+   * Disable the `X-XSS-Protection` header, which could introduce a browser
+   * side-channel if enabled.
+   */
+  xXssProtection?: boolean;
+}
+```
+
+### `withVercelToolbar(options: NoseconeOptions): NoseconeOptions`
+
+Nosecone provides the `withVercelToolbar` utility function to augment Nosecone
+options so the [Vercel
+Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar) is
+allowed by the various headers.
+
+This follows the guidelines documented by Vercel under [Using a Content Security
+Policy](https://vercel.com/docs/workflow-collaboration/vercel-toolbar/managing-toolbar#using-a-content-security-policy),
+but we recommend conditionally adding this based on `process.env.VERCEL_ENV`:
+
+import WithVercelToolbar from "@/snippets/nosecone/reference/WithVercelToolbar.mdx";
+
+<WithVercelToolbar />
+
+## Headers
+
+### `Content-Security-Policy`
+
+The `Content-Security-Policy` header is a powerful allow-list of what can happen
+on your page which helps mitigate many attacks, such as cross-site scripting.
+
+**Types:**
+
+<DisplayType type="StaticOrDynamic" generics={["S"]} from="nosecone" />
+<DisplayType type="Source" from="nosecone" />
+<DisplayType type="HostSource" from="nosecone" />
+<DisplayType type="SchemeSource" from="nosecone" />
+<DisplayType type="FrameSource" from="nosecone" />
+<DisplayType type="ActionSource" from="nosecone" />
+<DisplayType type="CspDirectives" from="nosecone" />
+<DisplayType type="ContentSecurityPolicyConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  directives: {
+    baseUri: ["'none'"],
+    childSrc: ["'none'"],
+    connectSrc: ["'self'"],
+    defaultSrc: ["'self'"],
+    fontSrc: ["'self'"],
+    formAction: ["'self'"],
+    frameAncestors: ["'none'"],
+    frameSrc: ["'none'"],
+    imgSrc: ["'self'", "blob:", "data:"],
+    manifestSrc: ["'self'"],
+    mediaSrc: ["'self'"],
+    objectSrc: ["'none'"],
+    scriptSrc: ["'self'"],
+    styleSrc: ["'self'"],
+    workerSrc: ["'self'"],
+  },
+}
+```
+
+:::note
+In production environments, we recommend setting `upgradeInsecureRequests: true`
+to ensure all requests are served with HTTPS.
+:::
+
+The defaults will produce the following header:
+
+```txt
+Content-Security-Policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self';
+```
+
+Additional resources:
+
+- [Google's CSP Evaluator](https://csp-evaluator.withgoogle.com/)
+- [CSP Validator](https://cspvalidator.org/)
+- [Strict Content-Security-Policy article on web.dev](https://web.dev/articles/strict-csp)
+- [MDN's Content-Security-Policy guide](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- [OWASP Secure Headers Project - Content-Security-Policy](https://owasp.org/www-project-secure-headers/#content-security-policy)
+
+### `Cross-Origin-Embedder-Policy`
+
+The `Cross-Origin-Embedder-Policy` header helps control what resources can be
+loaded cross-origin.
+
+**Types:**
+
+<DisplayType type="CrossOriginEmbedderPolicyConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  policy: "require-corp",
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+Additional resources:
+
+- [MDN's Cross-Origin-Embedder-Policy reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy)
+- [OWASP Secure Headers Project - Cross-Origin-Embedder-Policy](https://owasp.org/www-project-secure-headers/#cross-origin-embedder-policy)
+
+### `Cross-Origin-Opener-Policy`
+
+The `Cross-Origin-Opener-Policy` header helps process-isolate your page.
+
+**Types:**
+
+<DisplayType type="CrossOriginOpenerPolicyConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  policy: "same-origin",
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+Cross-Origin-Opener-Policy: same-origin
+```
+
+Additional resources:
+
+- [MDN's Cross-Origin-Opener-Policy reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+- [OWASP Secure Headers Project - Cross-Origin-Opener-Policy](https://owasp.org/www-project-secure-headers/#cross-origin-opener-policy)
+
+### `Cross-Origin-Resource-Policy`
+
+The `Cross-Origin-Resource-Policy` header blocks others from loading your
+resources cross-origin in some cases.
+
+**Types:**
+
+<DisplayType type="CrossOriginResourcePolicyConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  policy: "same-origin",
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+Cross-Origin-Resource-Policy: same-origin
+```
+
+Additional resources:
+
+- [Resource Policy FYI](https://resourcepolicy.fyi/)
+- [MDN's Cross-Origin-Resource-Policy reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy)
+- [OWASP Secure Headers Project - Cross-Origin-Resource-Policy](https://owasp.org/www-project-secure-headers/#cross-origin-resource-policy)
+
+### `Origin-Agent-Cluster`
+
+The `Origin-Agent-Cluster` header provides a mechanism to allow web applications
+to isolate their origins from other processes.
+
+**Types:**
+
+```ts
+type OriginAgentClusterConfig = boolean;
+```
+
+**Defaults:**
+
+```ts
+true;
+```
+
+The defaults will produce the following header:
+
+```txt
+Origin-Agent-Cluster: ?1
+```
+
+Additional resources:
+
+- [WHATPR Origin-keyed agent clusters specification](https://whatpr.org/html/6214/origin.html#origin-keyed-agent-clusters)
+
+### `Referrer-Policy`
+
+The `Referrer-Policy` header controls what information is set in the `Referer`
+request header.
+
+**Types:**
+
+<DisplayType type="ReferrerPolicyConfig" from="nosecone" />
+<DisplayType type="ReferrerPolicyToken" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  policy: ["no-referrer"],
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+Referrer-Policy: no-referrer
+```
+
+Additional resources:
+
+- [Referer header: Privacy and security concerns](https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns)
+- [MDN's Referrer-Policy reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+- [OWASP Secure Headers Project - Referrer-Policy](https://owasp.org/www-project-secure-headers/#referrer-policy)
+
+### `Strict-Transport-Security`
+
+The `Strict-Transport-Security` header tells browsers to prefer HTTPS instead of
+insecure HTTP.
+
+**Types:**
+
+<DisplayType type="StrictTransportSecurityConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  maxAge: 31536000, // 1 year
+  includeSubDomains: true,
+  preload: false,
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+Strict-Transport-Security: max-age=31536000; includeSubDomains
+```
+
+Additional resources:
+
+- [MDN's Strict-Transport-Security reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
+- [OWASP Secure Headers Project - Strict-Transport-Security](https://owasp.org/www-project-secure-headers/#strict-transport-security)
+
+### `X-Content-Type-Options`
+
+The `X-Content-Type-Options` header helps mitigate MIME type sniffing that can
+cause security issues.
+
+**Types:**
+
+```ts
+type ContentTypeOptionsConfig = boolean;
+```
+
+**Defaults:**
+
+```ts
+true;
+```
+
+The defaults will produce the following header:
+
+```txt
+X-Content-Type-Options: nosniff
+```
+
+Additional resources:
+
+- [MDN's X-Content-Type-Options reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options)
+- [MDN on MIME Sniffing](https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types#mime_sniffing)
+- [OWASP Secure Headers Project - X-Content-Type-Options](https://owasp.org/www-project-secure-headers/#x-content-type-options)
+
+### `X-DNS-Prefetch-Control`
+
+The `X-DNS-Prefetch-Control` header helps control DNS prefetching to improve
+user privacy at the expense of performance.
+
+**Types:**
+
+<DisplayType type="DnsPrefetchControlConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  allow: false,
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+X-DNS-Prefetch-Control: off
+```
+
+Additional resources:
+
+- [MDN's X-DNS-Prefetch-Control reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control)
+
+### `X-Download-Options` (legacy)
+
+The **legacy** `X-Download-Options` header prevented a user from opening a file
+directly in Internet Explorer to avoid prevent script injection.
+
+**Types:**
+
+```ts
+type DownloadOptionsCofig = boolean;
+```
+
+**Defaults:**
+
+```ts
+true;
+```
+
+The defaults will produce the following header:
+
+```txt
+X-Download-Options: noopen
+```
+
+Additional resources:
+
+- [Microsoft's guide to securing IE8](https://learn.microsoft.com/en-us/archive/blogs/ie/ie8-security-part-v-comprehensive-protection#mime-handling-force-save)
+
+### `X-Frame-Options` (legacy)
+
+:::note
+`X-Frame-Options` is superceded by the `frame-ancestors` directive in the
+`Content-Security-Policy` header.
+:::
+
+The **legacy** `X-Frame-Options` header helped mitigate clickjacking attacks in
+older browsers.
+
+**Types:**
+
+<DisplayType type="FrameOptionsConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  action: "sameorigin",
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+X-Frame-Options: SAMEORIGIN
+```
+
+Additional resources:
+
+- [MDN's X-Frame-Options reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
+- [OWASP Secure Headers Project - X-Frame-Options](https://owasp.org/www-project-secure-headers/#x-frame-options)
+
+### `X-Permitted-Cross-Domain-Policies`
+
+The `X-Permitted-Cross-Domain-Policies` header tells some clients, like Adobe
+products, your domain's policy for loading cross-domain content.
+
+**Types:**
+
+<DisplayType type="PermittedCrossDomainPoliciesConfig" from="nosecone" />
+
+**Defaults:**
+
+```ts
+{
+  permittedPolicies: "none",
+}
+```
+
+The defaults will produce the following header:
+
+```txt
+X-Permitted-Cross-Domain-Policies: none
+```
+
+Additional resources:
+
+- [OWASP Secure Headers Project - X-Permitted-Cross-Domain-Policies](https://owasp.org/www-project-secure-headers/#x-permitted-cross-domain-policies)
+
+### `X-XSS-Protection` (legacy)
+
+The **legacy** `X-XSS-Protection` header tried to mitigate XSS attacks, but
+accidentally enabled side-channel attacks in older browsers, so Nosecone
+disables it.
+
+**Types:**
+
+```ts
+type XssProtectionConfig = boolean;
+```
+
+**Defaults:**
+
+```ts
+true;
+```
+
+The defaults will produce the following header:
+
+```txt
+X-XSS-Protection: 0
+```
+
+Additional resources:
+
+- [Helmet team discussing X-XSS-Protection defaults](https://github.com/helmetjs/helmet/issues/230)
+- [MDN's X-XSS-Protection reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection)
+- [OWASP Secure Headers Project - X-XSS-Protection](https://owasp.org/www-project-secure-headers/#x-xss-protection)
+- [Portswigger explanation of side-channel](https://portswigger.net/daily-swig/new-xs-leak-techniques-reveal-fresh-ways-to-expose-user-information)
diff --git a/src/lib/sidebars.ts b/src/lib/sidebars.ts
index acbc4fdc..8f86c627 100644
--- a/src/lib/sidebars.ts
+++ b/src/lib/sidebars.ts
@@ -290,6 +290,20 @@ export const main = [
           },
         ],
       },
+      {
+        label: "Nosecone",
+        collapsed: true,
+        items: [
+          {
+            label: "Quick start",
+            link: "/nosecone/quick-start",
+          },
+          {
+            label: "Reference",
+            link: "/nosecone/reference",
+          },
+        ],
+      },
     ],
   },
   {
diff --git a/src/snippets/nosecone/quick-start/bun/Step1.mdx b/src/snippets/nosecone/quick-start/bun/Step1.mdx
new file mode 100644
index 00000000..1e9ff707
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step1.mdx
@@ -0,0 +1,12 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="bun" slotIdx="1">
+
+```bash
+bun add nosecone
+```
+
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/bun/Step2.js b/src/snippets/nosecone/quick-start/bun/Step2.js
new file mode 100644
index 00000000..5118f3d6
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step2.js
@@ -0,0 +1,10 @@
+import nosecone from "nosecone";
+
+Bun.serve({
+  port: 3000,
+  async fetch(req) {
+    return new Response("Hello world", {
+      headers: nosecone(),
+    });
+  },
+});
diff --git a/src/snippets/nosecone/quick-start/bun/Step2.mdx b/src/snippets/nosecone/quick-start/bun/Step2.mdx
new file mode 100644
index 00000000..fb88d1a2
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step2.mdx
@@ -0,0 +1,17 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import Step2TS from "./Step2.ts?raw";
+import Step2JS from "./Step2.js?raw";
+
+Nosecone creates headers that can be used directly as the `Response` headers in
+your Bun server.
+
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS" slotIdx="1">
+    <Code code={Step2TS} lang="ts" title="index.ts" ins={7} />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={Step2JS} lang="js" title="index.js" ins={7} />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/bun/Step2.ts b/src/snippets/nosecone/quick-start/bun/Step2.ts
new file mode 100644
index 00000000..0f029f39
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step2.ts
@@ -0,0 +1,10 @@
+import nosecone from "nosecone";
+
+Bun.serve({
+  port: 3000,
+  async fetch(req: Request) {
+    return new Response("Hello world", {
+      headers: nosecone(),
+    });
+  },
+});
diff --git a/src/snippets/nosecone/quick-start/bun/Step3.mdx b/src/snippets/nosecone/quick-start/bun/Step3.mdx
new file mode 100644
index 00000000..d4b1bb45
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step3.mdx
@@ -0,0 +1,15 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+<div slot="TS" slotIdx="1">
+```bash
+bun run --hot index.ts
+```
+</div>
+<div slot="JS" slotIdx="2">
+```bash
+bun run --hot index.js
+```
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/bun/Step4.mdx b/src/snippets/nosecone/quick-start/bun/Step4.mdx
new file mode 100644
index 00000000..b9a70983
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/bun/Step4.mdx
@@ -0,0 +1,26 @@
+Using the the curl command, we can inspect the headers:
+
+```sh
+curl -I -X GET localhost:3000
+```
+
+The printed headers should look something like:
+
+```txt
+HTTP/1.1 200 OK
+Content-Security-Policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self'; upgrade-insecure-requests;
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Resource-Policy: same-origin
+Referrer-Policy: no-referrer
+X-Content-Type-Options: nosniff
+X-DNS-Prefetch-Control: off
+X-Frame-Options: SAMEORIGIN
+X-XSS-Protection: 0
+origin-agent-cluster: ?1
+x-download-options: noopen
+x-permitted-cross-domain-policies: none
+content-type: text/plain;charset=utf-8
+Date: Wed, 27 Nov 2024 20:13:30 GMT
+Content-Length: 11
+```
diff --git a/src/snippets/nosecone/quick-start/deno/Step1.mdx b/src/snippets/nosecone/quick-start/deno/Step1.mdx
new file mode 100644
index 00000000..2cc667b6
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/deno/Step1.mdx
@@ -0,0 +1,12 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="deno" slotIdx="1">
+
+```bash
+deno add npm:nosecone
+```
+
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/deno/Step2.mdx b/src/snippets/nosecone/quick-start/deno/Step2.mdx
new file mode 100644
index 00000000..eb906785
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/deno/Step2.mdx
@@ -0,0 +1,13 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import Step2TS from "./Step2.ts?raw";
+
+Nosecone creates headers that can be used directly as the `Response` headers in
+your Deno server.
+
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS" slotIdx="1">
+    <Code code={Step2TS} lang="ts" title="index.ts" ins={5} />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/deno/Step2.ts b/src/snippets/nosecone/quick-start/deno/Step2.ts
new file mode 100644
index 00000000..caaff11f
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/deno/Step2.ts
@@ -0,0 +1,7 @@
+import nosecone from "npm:nosecone";
+
+Deno.serve({ port: 3000 }, async (req) => {
+  return new Response("Hello world", {
+    headers: nosecone(),
+  });
+});
diff --git a/src/snippets/nosecone/quick-start/deno/Step3.mdx b/src/snippets/nosecone/quick-start/deno/Step3.mdx
new file mode 100644
index 00000000..d38d77dd
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/deno/Step3.mdx
@@ -0,0 +1,10 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+<div slot="TS" slotIdx="1">
+```bash
+deno run --watch index.ts
+```
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/deno/Step4.mdx b/src/snippets/nosecone/quick-start/deno/Step4.mdx
new file mode 100644
index 00000000..86c1ec9f
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/deno/Step4.mdx
@@ -0,0 +1,28 @@
+Using the the curl command, we can inspect the headers:
+
+```sh
+curl -I -X GET localhost:3000
+```
+
+The printed headers should look something like:
+
+```txt
+HTTP/1.1 200 OK
+content-security-policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self'; upgrade-insecure-requests;
+cross-origin-embedder-policy: require-corp
+cross-origin-opener-policy: same-origin
+cross-origin-resource-policy: same-origin
+origin-agent-cluster: ?1
+referrer-policy: no-referrer
+strict-transport-security: max-age=31536000; includeSubDomains
+x-content-type-options: nosniff
+x-dns-prefetch-control: off
+x-download-options: noopen
+x-frame-options: SAMEORIGIN
+x-permitted-cross-domain-policies: none
+x-xss-protection: 0
+content-type: text/plain;charset=UTF-8
+vary: Accept-Encoding
+content-length: 13
+date: Wed, 27 Nov 2024 20:21:41 GMT
+```
diff --git a/src/snippets/nosecone/quick-start/next-js/Step1.mdx b/src/snippets/nosecone/quick-start/next-js/Step1.mdx
new file mode 100644
index 00000000..b30b774f
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step1.mdx
@@ -0,0 +1,26 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm i @nosecone/next
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm add @nosecone/next
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn add @nosecone/next
+```
+
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2.mdx b/src/snippets/nosecone/quick-start/next-js/Step2.mdx
new file mode 100644
index 00000000..5f6d593f
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2.mdx
@@ -0,0 +1,70 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import Step2MiddlewareTS from "./Step2Middleware.ts?raw";
+import Step2MiddlewareJS from "./Step2Middleware.js?raw";
+
+import Step2LayoutConnectionTS from "./Step2LayoutConnection.ts?raw";
+import Step2LayoutConnectionJS from "./Step2LayoutConnection.js?raw";
+import Step2LayoutNoCacheTS from "./Step2LayoutNoCache.ts?raw";
+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" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={Step2MiddlewareJS} lang="js" title="middleware.js" />
+  </div>
+</SelectableContent>
+
+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
+about this requirement.
+
+To opt-out of static generation, modify your layout file with the following:
+
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS (Next.js 15)" slotIdx="1">
+    <Code
+      code={Step2LayoutConnectionTS}
+      lang="ts"
+      title="app/layout.tsx"
+      ins={[1, 5, 6]}
+    />
+  </div>
+  <div slot="JS (Next.js 15)" slotIdx="2">
+    <Code
+      code={Step2LayoutConnectionJS}
+      lang="js"
+      title="app/layout.jsx"
+      ins={[1, 4, 5]}
+    />
+  </div>
+  <div slot="TS (Next.js 14)" slotIdx="3">
+    <Code
+      code={Step2LayoutNoCacheTS}
+      lang="ts"
+      title="app/layout.tsx"
+      ins={[1, 5, 6]}
+    />
+  </div>
+  <div slot="JS (Next.js 14)" slotIdx="4">
+    <Code
+      code={Step2LayoutNoCacheJS}
+      lang="js"
+      title="app/layout.jsx"
+      ins={[1, 4, 5]}
+    />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.js b/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.js
new file mode 100644
index 00000000..24975aec
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.js
@@ -0,0 +1,8 @@
+import { connection } from "next/server";
+
+export default async function RootLayout(props) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  await connection();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.ts b/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.ts
new file mode 100644
index 00000000..44cec496
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2LayoutConnection.ts
@@ -0,0 +1,9 @@
+import { connection } from "next/server";
+import type { PropsWithChildren } from "react";
+
+export default async function RootLayout(props: PropsWithChildren) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  await connection();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.js b/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.js
new file mode 100644
index 00000000..8c8b37b7
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.js
@@ -0,0 +1,8 @@
+import { unstable_noStore as noStore } from "next/cache";
+
+export default function RootLayout(props) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  noStore();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.ts b/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.ts
new file mode 100644
index 00000000..faa3cab0
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2LayoutNoCache.ts
@@ -0,0 +1,9 @@
+import { unstable_noStore as noStore } from "next/cache";
+import type { PropsWithChildren } from "react";
+
+export default function RootLayout(props: PropsWithChildren) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  noStore();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2Middleware.js b/src/snippets/nosecone/quick-start/next-js/Step2Middleware.js
new file mode 100644
index 00000000..a63a6213
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2Middleware.js
@@ -0,0 +1,5 @@
+import { createMiddleware } from "@nosecone/next";
+
+// Remove your middleware matcher so Nosecone runs on every route.
+
+export default createMiddleware();
diff --git a/src/snippets/nosecone/quick-start/next-js/Step2Middleware.ts b/src/snippets/nosecone/quick-start/next-js/Step2Middleware.ts
new file mode 100644
index 00000000..a63a6213
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step2Middleware.ts
@@ -0,0 +1,5 @@
+import { createMiddleware } from "@nosecone/next";
+
+// Remove your middleware matcher so Nosecone runs on every route.
+
+export default createMiddleware();
diff --git a/src/snippets/nosecone/quick-start/next-js/Step3.mdx b/src/snippets/nosecone/quick-start/next-js/Step3.mdx
new file mode 100644
index 00000000..49553223
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step3.mdx
@@ -0,0 +1,20 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+```sh
+npm run dev
+```
+</div>
+<div slot="pnpm" slotIdx="2">
+```sh
+pnpm run dev
+```
+</div>
+<div slot="yarn" slotIdx="3">
+```sh
+yarn run dev
+```
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/next-js/Step4.mdx b/src/snippets/nosecone/quick-start/next-js/Step4.mdx
new file mode 100644
index 00000000..b5fe1037
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/next-js/Step4.mdx
@@ -0,0 +1,33 @@
+Using the the curl command, we can inspect the headers:
+
+```sh
+curl -I -X GET localhost:3000
+```
+
+The printed headers should look something like:
+
+```txt
+HTTP/1.1 200 OK
+content-security-policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'nonce-YWUwNGIwMTMtOTgwYi00MWNiLWI3M2QtMjBkYWQwODMxZTNi' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self'; upgrade-insecure-requests;
+cross-origin-embedder-policy: require-corp
+cross-origin-opener-policy: same-origin
+cross-origin-resource-policy: same-origin
+origin-agent-cluster: ?1
+referrer-policy: no-referrer
+strict-transport-security: max-age=31536000; includeSubDomains
+x-content-type-options: nosniff
+x-dns-prefetch-control: off
+x-download-options: noopen
+x-frame-options: SAMEORIGIN
+x-permitted-cross-domain-policies: none
+x-xss-protection: 0
+Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch, Accept-Encoding
+link: </_next/static/media/a34f9d1faa5f3315-s.p.woff2>; rel=preload; as="font"; crossorigin=""; nonce="YWUwNGIwMTMtOTgwYi00MWNiLWI3M2QtMjBkYWQwODMxZTNi"; type="font/woff2", </vercel.svg>; rel=preload; as="image", </next.svg>; rel=preload; as="image", </_next/static/css/app/layout.css?v=1732741292630>; rel=preload; as="style"; nonce="YWUwNGIwMTMtOTgwYi00MWNiLWI3M2QtMjBkYWQwODMxZTNi"
+Cache-Control: no-store, must-revalidate
+X-Powered-By: Next.js
+Content-Type: text/html; charset=utf-8
+Date: Wed, 27 Nov 2024 21:01:32 GMT
+Connection: keep-alive
+Keep-Alive: timeout=5
+Transfer-Encoding: chunked
+```
diff --git a/src/snippets/nosecone/quick-start/node-js/Step1.mdx b/src/snippets/nosecone/quick-start/node-js/Step1.mdx
new file mode 100644
index 00000000..2e86d49d
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step1.mdx
@@ -0,0 +1,26 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm i nosecone
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm add nosecone
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn add nosecone
+```
+
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/node-js/Step2.js b/src/snippets/nosecone/quick-start/node-js/Step2.js
new file mode 100644
index 00000000..8979c912
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step2.js
@@ -0,0 +1,10 @@
+import nosecone from "nosecone";
+import * as http from "node:http";
+
+const server = http.createServer(async function (req, res) {
+  res.setHeaders(nosecone());
+  res.writeHead(200, { "Content-Type": "text/plain" });
+  res.end("Hello world");
+});
+
+server.listen(3000);
diff --git a/src/snippets/nosecone/quick-start/node-js/Step2.mdx b/src/snippets/nosecone/quick-start/node-js/Step2.mdx
new file mode 100644
index 00000000..7380537c
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step2.mdx
@@ -0,0 +1,17 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import Step2TS from "./Step2.ts?raw";
+import Step2JS from "./Step2.js?raw";
+
+Nosecone creates headers that can be applied directly with `res.setHeaders()` in
+your Node.js server.
+
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS" slotIdx="1">
+    <Code code={Step2TS} lang="ts" title="index.ts" ins={[1, 8]} />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={Step2JS} lang="js" title="index.js" ins={[1, 5]} />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/node-js/Step2.ts b/src/snippets/nosecone/quick-start/node-js/Step2.ts
new file mode 100644
index 00000000..a47f6139
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step2.ts
@@ -0,0 +1,13 @@
+import nosecone from "nosecone";
+import * as http from "node:http";
+
+const server = http.createServer(async function (
+  req: http.IncomingMessage,
+  res: http.ServerResponse,
+) {
+  res.setHeaders(nosecone());
+  res.writeHead(200, { "Content-Type": "text/plain" });
+  res.end("Hello world");
+});
+
+server.listen(3000);
diff --git a/src/snippets/nosecone/quick-start/node-js/Step3.mdx b/src/snippets/nosecone/quick-start/node-js/Step3.mdx
new file mode 100644
index 00000000..548fd667
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step3.mdx
@@ -0,0 +1,15 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS" slotIdx="1">
+    ```sh
+    npx tsx index.ts
+    ```
+  </div>
+  <div slot="JS" slotIdx="2">
+    ```sh
+    node index.js
+    ```
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/node-js/Step4.mdx b/src/snippets/nosecone/quick-start/node-js/Step4.mdx
new file mode 100644
index 00000000..0dc3f76e
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/node-js/Step4.mdx
@@ -0,0 +1,29 @@
+Using the the curl command, we can inspect the headers:
+
+```sh
+curl -I -X GET localhost:3000
+```
+
+The printed headers should look something like:
+
+```txt
+HTTP/1.1 200 OK
+content-security-policy: base-uri 'none'; child-src 'none'; connect-src 'self'; default-src 'self'; font-src 'self'; form-action 'self'; frame-ancestors 'none'; frame-src 'none'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self'; upgrade-insecure-requests;
+cross-origin-embedder-policy: require-corp
+cross-origin-opener-policy: same-origin
+cross-origin-resource-policy: same-origin
+origin-agent-cluster: ?1
+referrer-policy: no-referrer
+strict-transport-security: max-age=31536000; includeSubDomains
+x-content-type-options: nosniff
+x-dns-prefetch-control: off
+x-download-options: noopen
+x-frame-options: SAMEORIGIN
+x-permitted-cross-domain-policies: none
+x-xss-protection: 0
+Content-Type: text/plain
+Date: Wed, 27 Nov 2024 21:05:50 GMT
+Connection: keep-alive
+Keep-Alive: timeout=5
+Transfer-Encoding: chunked
+```
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step1.mdx b/src/snippets/nosecone/quick-start/sveltekit/Step1.mdx
new file mode 100644
index 00000000..b893a8ff
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step1.mdx
@@ -0,0 +1,26 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+
+```sh
+npm i @nosecone/sveltekit
+```
+
+</div>
+<div slot="pnpm" slotIdx="2">
+
+```sh
+pnpm add @nosecone/sveltekit
+```
+
+</div>
+<div slot="yarn" slotIdx="3">
+
+```sh
+yarn add @nosecone/sveltekit
+```
+
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step2.mdx b/src/snippets/nosecone/quick-start/sveltekit/Step2.mdx
new file mode 100644
index 00000000..9a004a62
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step2.mdx
@@ -0,0 +1,27 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import Step2HooksTS from "./Step2Hooks.ts?raw";
+import Step2HooksJS from "./Step2Hooks.js?raw";
+import Step2Config from "./Step2Config.js?raw";
+
+Nosecone applies headers to all your routes via hooks in your SvelteKit
+application.
+
+<SelectableContent client:load syncKey="language" frameworkSwitcher>
+  <div slot="TS" slotIdx="1">
+    Create the `src/hooks.server.ts` file in your project with the contents:
+    <Code code={Step2HooksTS} lang="ts" title="src/hooks.server.ts" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    Create the `src/hooks.server.js` file in your project with the contents:
+    <Code code={Step2HooksJS} lang="js" title="src/hooks.server.js" />
+  </div>
+</SelectableContent>
+
+SvelteKit provides the Content-Security-Policy header via the framework, so
+Nosecone helps you to configure it.
+
+Update your `svelte.config.js` to configure `csp`:
+
+<Code code={Step2Config} lang="js" title="svelte.config.js" ins={[3, 10, 11]} />
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step2Config.js b/src/snippets/nosecone/quick-start/sveltekit/Step2Config.js
new file mode 100644
index 00000000..d3b66750
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step2Config.js
@@ -0,0 +1,16 @@
+import adapter from "@sveltejs/adapter-auto";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { csp } from "@nosecone/sveltekit"
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // Apply CSP with Nosecone defaults
+    csp: csp(),
+    adapter: adapter(),
+  },
+};
+
+export default config;
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.js b/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.js
new file mode 100644
index 00000000..7c03935e
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.js
@@ -0,0 +1,4 @@
+import { createHook } from "@nosecone/sveltekit";
+import { sequence } from "@sveltejs/kit/hooks";
+
+export const handle = sequence(createHook());
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.ts b/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.ts
new file mode 100644
index 00000000..7c03935e
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step2Hooks.ts
@@ -0,0 +1,4 @@
+import { createHook } from "@nosecone/sveltekit";
+import { sequence } from "@sveltejs/kit/hooks";
+
+export const handle = sequence(createHook());
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step3.mdx b/src/snippets/nosecone/quick-start/sveltekit/Step3.mdx
new file mode 100644
index 00000000..49553223
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step3.mdx
@@ -0,0 +1,20 @@
+import SelectableContent from "@/components/SelectableContent";
+
+{/* prettier-ignore */}
+<SelectableContent client:load syncKey="packageManager" frameworkSwitcher>
+<div slot="npm" slotIdx="1">
+```sh
+npm run dev
+```
+</div>
+<div slot="pnpm" slotIdx="2">
+```sh
+pnpm run dev
+```
+</div>
+<div slot="yarn" slotIdx="3">
+```sh
+yarn run dev
+```
+</div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/quick-start/sveltekit/Step4.mdx b/src/snippets/nosecone/quick-start/sveltekit/Step4.mdx
new file mode 100644
index 00000000..8e794370
--- /dev/null
+++ b/src/snippets/nosecone/quick-start/sveltekit/Step4.mdx
@@ -0,0 +1,32 @@
+Using the the curl command, we can inspect the headers:
+
+```sh
+curl -I -X GET localhost:5173
+```
+
+The printed headers should look something like:
+
+```txt
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: *
+content-length: 1475
+content-security-policy: child-src 'none'; default-src 'self'; frame-src 'none'; worker-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' blob: data:; manifest-src 'self'; media-src 'self'; object-src 'none'; script-src 'self' 'nonce-RsMu23BBsCD1PV101d7Prg=='; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests
+content-type: text/html
+cross-origin-embedder-policy: require-corp
+cross-origin-opener-policy: same-origin
+cross-origin-resource-policy: same-origin
+etag: "bz71zn"
+origin-agent-cluster: ?1
+referrer-policy: no-referrer
+strict-transport-security: max-age=31536000; includeSubDomains
+x-content-type-options: nosniff
+x-dns-prefetch-control: off
+x-download-options: noopen
+x-frame-options: SAMEORIGIN
+x-permitted-cross-domain-policies: none
+x-sveltekit-page: true
+x-xss-protection: 0
+Date: Wed, 27 Nov 2024 15:23:13 GMT
+Connection: keep-alive
+Keep-Alive: timeout=5
+```
diff --git a/src/snippets/nosecone/reference/WithVercelToolbar.js b/src/snippets/nosecone/reference/WithVercelToolbar.js
new file mode 100644
index 00000000..dce94420
--- /dev/null
+++ b/src/snippets/nosecone/reference/WithVercelToolbar.js
@@ -0,0 +1,12 @@
+import nosecone, { defaults, withVercelToolbar } from "nosecone";
+
+const noseconeConfig = {
+  ...defaults,
+  // Any customizations needed
+};
+
+const headers = nosecone(
+  process.env.VERCEL_ENV === "preview"
+    ? withVercelToolbar(noseconeConfig)
+    : noseconeConfig,
+);
diff --git a/src/snippets/nosecone/reference/WithVercelToolbar.mdx b/src/snippets/nosecone/reference/WithVercelToolbar.mdx
new file mode 100644
index 00000000..fd77dc2c
--- /dev/null
+++ b/src/snippets/nosecone/reference/WithVercelToolbar.mdx
@@ -0,0 +1,14 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import WithVercelToolbarTS from "./WithVercelToolbar.ts?raw";
+import WithVercelToolbarJS from "./WithVercelToolbar.js?raw";
+
+<SelectableContent client:load syncKey="language">
+  <div slot="TS" slotIdx="1">
+    <Code code={WithVercelToolbarTS} lang="ts" title="index.ts" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={WithVercelToolbarJS} lang="js" title="index.js" />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/reference/WithVercelToolbar.ts b/src/snippets/nosecone/reference/WithVercelToolbar.ts
new file mode 100644
index 00000000..ce1705bd
--- /dev/null
+++ b/src/snippets/nosecone/reference/WithVercelToolbar.ts
@@ -0,0 +1,13 @@
+import nosecone, { defaults, withVercelToolbar } from "nosecone";
+import type { NoseconeOptions } from "nosecone";
+
+const noseconeConfig: NoseconeOptions = {
+  ...defaults,
+  // Any customizations needed
+};
+
+const headers = nosecone(
+  process.env.VERCEL_ENV === "preview"
+    ? withVercelToolbar(noseconeConfig)
+    : noseconeConfig,
+);
diff --git a/src/snippets/nosecone/reference/next-js/LayoutConnection.js b/src/snippets/nosecone/reference/next-js/LayoutConnection.js
new file mode 100644
index 00000000..24975aec
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/LayoutConnection.js
@@ -0,0 +1,8 @@
+import { connection } from "next/server";
+
+export default async function RootLayout(props) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  await connection();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/reference/next-js/LayoutConnection.ts b/src/snippets/nosecone/reference/next-js/LayoutConnection.ts
new file mode 100644
index 00000000..44cec496
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/LayoutConnection.ts
@@ -0,0 +1,9 @@
+import { connection } from "next/server";
+import type { PropsWithChildren } from "react";
+
+export default async function RootLayout(props: PropsWithChildren) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  await connection();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/reference/next-js/LayoutNoCache.js b/src/snippets/nosecone/reference/next-js/LayoutNoCache.js
new file mode 100644
index 00000000..8c8b37b7
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/LayoutNoCache.js
@@ -0,0 +1,8 @@
+import { unstable_noStore as noStore } from "next/cache";
+
+export default function RootLayout(props) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  noStore();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/reference/next-js/LayoutNoCache.ts b/src/snippets/nosecone/reference/next-js/LayoutNoCache.ts
new file mode 100644
index 00000000..faa3cab0
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/LayoutNoCache.ts
@@ -0,0 +1,9 @@
+import { unstable_noStore as noStore } from "next/cache";
+import type { PropsWithChildren } from "react";
+
+export default function RootLayout(props: PropsWithChildren) {
+  // Opt-out of static generation for every page so the CSP nonce can be applied
+  noStore();
+
+  // ...
+}
diff --git a/src/snippets/nosecone/reference/next-js/Middleware.js b/src/snippets/nosecone/reference/next-js/Middleware.js
new file mode 100644
index 00000000..a63a6213
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/Middleware.js
@@ -0,0 +1,5 @@
+import { createMiddleware } from "@nosecone/next";
+
+// Remove your middleware matcher so Nosecone runs on every route.
+
+export default createMiddleware();
diff --git a/src/snippets/nosecone/reference/next-js/Middleware.mdx b/src/snippets/nosecone/reference/next-js/Middleware.mdx
new file mode 100644
index 00000000..464f3080
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/Middleware.mdx
@@ -0,0 +1,19 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import MiddlewareTS from "./Middleware.ts?raw";
+import MiddlewareJS from "./Middleware.js?raw";
+
+<SelectableContent client:load syncKey="language">
+  <div slot="TS" slotIdx="1">
+    <Code code={MiddlewareTS} lang="ts" title="middleware.ts" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    <Code code={MiddlewareJS} lang="js" title="middleware.js" />
+  </div>
+</SelectableContent>
+
+:::note
+We recommend you remove any `export const config = ...` from your middleware so
+Nosecone will run on every route.
+:::
diff --git a/src/snippets/nosecone/reference/next-js/Middleware.ts b/src/snippets/nosecone/reference/next-js/Middleware.ts
new file mode 100644
index 00000000..a63a6213
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/Middleware.ts
@@ -0,0 +1,5 @@
+import { createMiddleware } from "@nosecone/next";
+
+// Remove your middleware matcher so Nosecone runs on every route.
+
+export default createMiddleware();
diff --git a/src/snippets/nosecone/reference/next-js/StaticOptOut.mdx b/src/snippets/nosecone/reference/next-js/StaticOptOut.mdx
new file mode 100644
index 00000000..c308ce87
--- /dev/null
+++ b/src/snippets/nosecone/reference/next-js/StaticOptOut.mdx
@@ -0,0 +1,47 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import LayoutConnectionTS from "./LayoutConnection.ts?raw";
+import LayoutConnectionJS from "./LayoutConnection.js?raw";
+import LayoutNoCacheTS from "./LayoutNoCache.ts?raw";
+import LayoutNoCacheJS from "./LayoutNoCache.js?raw";
+
+<SelectableContent client:load syncKey="language">
+  <div slot="TS (Next.js 15)" slotIdx="1">
+    <Code
+      code={LayoutConnectionTS}
+      lang="ts"
+      title="app/layout.tsx"
+      ins={[1, 5, 6]}
+    />
+  </div>
+  <div slot="JS (Next.js 15)" slotIdx="2">
+    <Code
+      code={LayoutConnectionJS}
+      lang="js"
+      title="app/layout.jsx"
+      ins={[1, 4, 5]}
+    />
+  </div>
+  <div slot="TS (Next.js 14)" slotIdx="3">
+    <Code
+      code={LayoutNoCacheTS}
+      lang="ts"
+      title="app/layout.tsx"
+      ins={[1, 5, 6]}
+    />
+  </div>
+  <div slot="JS (Next.js 14)" slotIdx="4">
+    <Code
+      code={LayoutNoCacheJS}
+      lang="js"
+      title="app/layout.jsx"
+      ins={[1, 4, 5]}
+    />
+  </div>
+</SelectableContent>
+
+:::caution
+If you cannot opt-out of static generation, you will need to remove the
+`nonce()` function from the provided defaults.
+:::
diff --git a/src/snippets/nosecone/reference/sveltekit/Config.js b/src/snippets/nosecone/reference/sveltekit/Config.js
new file mode 100644
index 00000000..d3b66750
--- /dev/null
+++ b/src/snippets/nosecone/reference/sveltekit/Config.js
@@ -0,0 +1,16 @@
+import adapter from "@sveltejs/adapter-auto";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { csp } from "@nosecone/sveltekit"
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // Apply CSP with Nosecone defaults
+    csp: csp(),
+    adapter: adapter(),
+  },
+};
+
+export default config;
diff --git a/src/snippets/nosecone/reference/sveltekit/Config.mdx b/src/snippets/nosecone/reference/sveltekit/Config.mdx
new file mode 100644
index 00000000..7f420835
--- /dev/null
+++ b/src/snippets/nosecone/reference/sveltekit/Config.mdx
@@ -0,0 +1,7 @@
+import { Code } from "@astrojs/starlight/components";
+
+import Config from "./Config.js?raw";
+
+Update your `svelte.config.js` to configure `csp`:
+
+<Code code={Config} lang="js" title="svelte.config.js" ins={[3, 10, 11]} />
diff --git a/src/snippets/nosecone/reference/sveltekit/Hooks.js b/src/snippets/nosecone/reference/sveltekit/Hooks.js
new file mode 100644
index 00000000..7c03935e
--- /dev/null
+++ b/src/snippets/nosecone/reference/sveltekit/Hooks.js
@@ -0,0 +1,4 @@
+import { createHook } from "@nosecone/sveltekit";
+import { sequence } from "@sveltejs/kit/hooks";
+
+export const handle = sequence(createHook());
diff --git a/src/snippets/nosecone/reference/sveltekit/Hooks.mdx b/src/snippets/nosecone/reference/sveltekit/Hooks.mdx
new file mode 100644
index 00000000..dbfb44b7
--- /dev/null
+++ b/src/snippets/nosecone/reference/sveltekit/Hooks.mdx
@@ -0,0 +1,16 @@
+import { Code } from "@astrojs/starlight/components";
+import SelectableContent from "@/components/SelectableContent";
+
+import HooksTS from "./Hooks.ts?raw";
+import HooksJS from "./Hooks.js?raw";
+
+<SelectableContent client:load syncKey="language">
+  <div slot="TS" slotIdx="1">
+    Create the `src/hooks.server.ts` file in your project with the contents:
+    <Code code={HooksTS} lang="ts" title="src/hooks.server.ts" />
+  </div>
+  <div slot="JS" slotIdx="2">
+    Create the `src/hooks.server.js` file in your project with the contents:
+    <Code code={HooksJS} lang="js" title="src/hooks.server.js" />
+  </div>
+</SelectableContent>
diff --git a/src/snippets/nosecone/reference/sveltekit/Hooks.ts b/src/snippets/nosecone/reference/sveltekit/Hooks.ts
new file mode 100644
index 00000000..7c03935e
--- /dev/null
+++ b/src/snippets/nosecone/reference/sveltekit/Hooks.ts
@@ -0,0 +1,4 @@
+import { createHook } from "@nosecone/sveltekit";
+import { sequence } from "@sveltejs/kit/hooks";
+
+export const handle = sequence(createHook());
diff --git a/tsconfig.json b/tsconfig.json
index 04d632e6..6845c553 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,5 +10,5 @@
     }
   },
   "extends": ["astro/tsconfigs/strict", "@arcjet/tsconfig/base.json"],
-  "include": ["src/**/*", "env.d.ts", "environment.d.ts"]
+  "include": ["src/**/*", "env.d.ts", "environment.d.ts", "next-server.d.ts"]
 }