diff --git a/examples/markdoc/.gitignore b/examples/markdoc/.gitignore
new file mode 100644
index 0000000000000..761ea1c23160f
--- /dev/null
+++ b/examples/markdoc/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+*.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
\ No newline at end of file
diff --git a/examples/markdoc/README.md b/examples/markdoc/README.md
new file mode 100644
index 0000000000000..b85257c061873
--- /dev/null
+++ b/examples/markdoc/README.md
@@ -0,0 +1,23 @@
+# Example app with Markdoc
+
+This example shows using [Markdoc](https://github.com/markdoc/markdoc) as top level pages for your Next.js app.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/markdoc)
+
+[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/markdoc&project-name=markdoc&repository-name=markdoc)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example markdoc markdoc-app
+# or
+yarn create next-app --example markdoc markdoc-app
+# or
+pnpm create next-app -- --example markdoc markdoc-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/markdoc/markdoc/functions.ts b/examples/markdoc/markdoc/functions.ts
new file mode 100644
index 0000000000000..c846085c19da3
--- /dev/null
+++ b/examples/markdoc/markdoc/functions.ts
@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc functions */
+export default {}
diff --git a/examples/markdoc/markdoc/nodes.ts b/examples/markdoc/markdoc/nodes.ts
new file mode 100644
index 0000000000000..493e846556907
--- /dev/null
+++ b/examples/markdoc/markdoc/nodes.ts
@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc nodes */
+export default {}
diff --git a/examples/markdoc/markdoc/tags.ts b/examples/markdoc/markdoc/tags.ts
new file mode 100644
index 0000000000000..cfdda224f286c
--- /dev/null
+++ b/examples/markdoc/markdoc/tags.ts
@@ -0,0 +1,2 @@
+/* Use this file to export your Markdoc tags */
+export default {}
diff --git a/examples/markdoc/next-env.d.ts b/examples/markdoc/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/markdoc/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/markdoc/next.config.js b/examples/markdoc/next.config.js
new file mode 100644
index 0000000000000..76948d20e5116
--- /dev/null
+++ b/examples/markdoc/next.config.js
@@ -0,0 +1,6 @@
+const withMarkdoc = require('@markdoc/next.js')
+
+module.exports =
+ withMarkdoc(/* config: https://markdoc.io/docs/nextjs#options */)({
+ pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdoc'],
+ })
diff --git a/examples/markdoc/package.json b/examples/markdoc/package.json
new file mode 100644
index 0000000000000..97bb6f75848b0
--- /dev/null
+++ b/examples/markdoc/package.json
@@ -0,0 +1,21 @@
+{
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "@markdoc/markdoc": "latest",
+ "@markdoc/next.js": "latest",
+ "next": "latest",
+ "react": "latest",
+ "react-dom": "latest"
+ },
+ "devDependencies": {
+ "@types/node": "latest",
+ "@types/react": "latest",
+ "@types/react-dom": "latest",
+ "typescript": "latest"
+ }
+}
diff --git a/examples/markdoc/pages/_app.tsx b/examples/markdoc/pages/_app.tsx
new file mode 100644
index 0000000000000..8130a5c1242e3
--- /dev/null
+++ b/examples/markdoc/pages/_app.tsx
@@ -0,0 +1,7 @@
+import type { AppProps } from 'next/app'
+
+import '../public/globals.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+ return
+}
diff --git a/examples/markdoc/pages/index.md b/examples/markdoc/pages/index.md
new file mode 100644
index 0000000000000..75e4273ec0533
--- /dev/null
+++ b/examples/markdoc/pages/index.md
@@ -0,0 +1,18 @@
+---
+title: Get started with Markdoc
+description: How to get started with Markdoc
+---
+
+# Markdoc
+
+This website is a lightweight boilerplate to spin up a documentation website with Markdoc.
+
+## Quick start
+
+If you want to get started right away with this boilerplate, either clone the [GitHub repository](https://github.com/markdoc/docs/tree/main/examples/simple-nextjs) or deploy a version of this site to Vercel by clicking the button below.
+
+[](https://vercel.com/new/clone?repository-url=https://github.com/markdoc/docs/tree/main/examples/simple-nextjs)
+
+## Get started from scratch
+
+If you'd prefer to start from scratch, feel free to check out the [official repository](https://github.com/markdoc/markdoc) and [documentation site](https://markdoc.io/docs/getting-started).
diff --git a/examples/markdoc/public/favicon.ico b/examples/markdoc/public/favicon.ico
new file mode 100644
index 0000000000000..718d6fea4835e
Binary files /dev/null and b/examples/markdoc/public/favicon.ico differ
diff --git a/examples/markdoc/public/globals.css b/examples/markdoc/public/globals.css
new file mode 100644
index 0000000000000..e6bbf54725156
--- /dev/null
+++ b/examples/markdoc/public/globals.css
@@ -0,0 +1,38 @@
+body {
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+ color: rgba(60, 66, 87, 1);
+ margin: 0;
+}
+
+#__next {
+ display: grid;
+ grid-template-columns: 0.1fr 1fr 0.15fr;
+ grid-template-rows: 1fr 0.05fr;
+ height: 100vh;
+}
+
+article {
+ grid-column: 2 / 3;
+ grid-row: 1;
+ font-size: 16px;
+ padding: 4em 2em;
+}
+
+h1 {
+ font-size: 40px;
+}
+
+a {
+ color: rgba(75, 85, 99, 1);
+}
+
+h2 {
+ margin: 2em 0;
+}
+
+p {
+ line-height: 1.5em;
+ font-weight: 300;
+}
diff --git a/examples/markdoc/tsconfig.json b/examples/markdoc/tsconfig.json
new file mode 100644
index 0000000000000..1563f3e878573
--- /dev/null
+++ b/examples/markdoc/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}