diff --git a/docs/content/4.examples/5.server/routes.md b/docs/content/4.examples/5.server/routes.md
new file mode 100644
index 0000000000..781e174d8b
--- /dev/null
+++ b/docs/content/4.examples/5.server/routes.md
@@ -0,0 +1,12 @@
+---
+template: Example
+---
+
+# Server Routes
+
+This example shows how to create server routes inside a `server/api` directory.
+
+::ReadMore{link="/guide/features/server-routes"}
+::
+
+::sandbox{repo="nuxt/framework" branch="main" dir="examples/server/routes" file="app.vue"}
diff --git a/docs/content/4.examples/5.advanced/config-extends.md b/docs/content/4.examples/6.advanced/config-extends.md
similarity index 100%
rename from docs/content/4.examples/5.advanced/config-extends.md
rename to docs/content/4.examples/6.advanced/config-extends.md
diff --git a/docs/content/4.examples/5.advanced/module-extend-pages.md b/docs/content/4.examples/6.advanced/module-extend-pages.md
similarity index 100%
rename from docs/content/4.examples/5.advanced/module-extend-pages.md
rename to docs/content/4.examples/6.advanced/module-extend-pages.md
diff --git a/docs/content/4.examples/5.advanced/testing.md b/docs/content/4.examples/6.advanced/testing.md
similarity index 100%
rename from docs/content/4.examples/5.advanced/testing.md
rename to docs/content/4.examples/6.advanced/testing.md
diff --git a/docs/content/4.examples/6.experimental/reactivity-transform.md b/docs/content/4.examples/7.experimental/reactivity-transform.md
similarity index 100%
rename from docs/content/4.examples/6.experimental/reactivity-transform.md
rename to docs/content/4.examples/7.experimental/reactivity-transform.md
diff --git a/docs/content/4.examples/6.experimental/wasm.md b/docs/content/4.examples/7.experimental/wasm.md
similarity index 100%
rename from docs/content/4.examples/6.experimental/wasm.md
rename to docs/content/4.examples/7.experimental/wasm.md
diff --git a/docs/content/4.examples/7.other/locale.md b/docs/content/4.examples/8.other/locale.md
similarity index 100%
rename from docs/content/4.examples/7.other/locale.md
rename to docs/content/4.examples/8.other/locale.md
diff --git a/examples/server/routes/app.vue b/examples/server/routes/app.vue
new file mode 100644
index 0000000000..c5537ec950
--- /dev/null
+++ b/examples/server/routes/app.vue
@@ -0,0 +1,9 @@
+<template>
+  <NuxtExampleLayout example="server/routes">
+    <p>Fetched from <pre>/api/mountain</pre>: {{ mountain }}</p>
+  </NuxtExampleLayout>
+</template>
+
+<script setup>
+const { data: mountain } = await useFetch('/api/mountain')
+</script>
diff --git a/examples/server/routes/nuxt.config.ts b/examples/server/routes/nuxt.config.ts
new file mode 100644
index 0000000000..9850816d15
--- /dev/null
+++ b/examples/server/routes/nuxt.config.ts
@@ -0,0 +1,7 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
+})
diff --git a/examples/server/routes/package.json b/examples/server/routes/package.json
new file mode 100644
index 0000000000..150a6652fb
--- /dev/null
+++ b/examples/server/routes/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-server-routes",
+  "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
+  }
+}
diff --git a/examples/server/routes/server/api/mountain.js b/examples/server/routes/server/api/mountain.js
new file mode 100644
index 0000000000..a3e85f2427
--- /dev/null
+++ b/examples/server/routes/server/api/mountain.js
@@ -0,0 +1,17 @@
+export default defineEventHandler(() => {
+  return {
+    title: 'Mount Everest',
+    description: "Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point",
+    height: '8,848 m',
+    countries: [
+      'China',
+      'Nepal'
+    ],
+    continent: 'Asia',
+    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Everest_kalapatthar.jpg/600px-Everest_kalapatthar.jpg',
+    dir: '/mountains',
+    path: '/mountains/mount-everest',
+    slug: 'mount-everest',
+    updatedAt: '2020-12-11T15:40:35.000Z'
+  }
+})
diff --git a/examples/server/routes/tsconfig.json b/examples/server/routes/tsconfig.json
new file mode 100644
index 0000000000..4b34df1571
--- /dev/null
+++ b/examples/server/routes/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/yarn.lock b/yarn.lock
index 5c602c9814..01e8630342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6514,6 +6514,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"example-server-routes@workspace:examples/server/routes":
+  version: 0.0.0-use.local
+  resolution: "example-server-routes@workspace:examples/server/routes"
+  dependencies:
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+    nuxt3: latest
+  languageName: unknown
+  linkType: soft
+
 "example-teleport@workspace:examples/app/teleport":
   version: 0.0.0-use.local
   resolution: "example-teleport@workspace:examples/app/teleport"