diff --git a/examples/middleware/.eslintrc.json b/examples/middleware/.eslintrc.json
deleted file mode 100755
index bffb357a71225..0000000000000
--- a/examples/middleware/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": "next/core-web-vitals"
-}
diff --git a/examples/middleware/README.md b/examples/middleware/README.md
index daf2757ab9b4d..a8eeb816f9d3d 100755
--- a/examples/middleware/README.md
+++ b/examples/middleware/README.md
@@ -1,8 +1,8 @@
# Middleware
-This example shows how to use [Middleware in Next.js](https://nextjs.org/docs/advanced-features/middleware) to run code before a request is completed.
+This example shows how to use [Middleware in Next.js](https://nextjs.org/docs/app/building-your-application/routing/middleware) to run code before a request is completed.
-The index page ([`pages/index.tsx`](pages/index.tsx)) has a list of links to pages with `redirect`, `rewrite`, or normal behavior.
+The index page ([`app/page.tsx`](app/page.tsx)) has a list of links to pages with `redirect`, `rewrite`, or normal behavior.
On the Middleware file ([`middleware.ts`](middleware.ts)) the routes are already being filtered by defining a `matcher` on the exported config. If you want the Middleware to run for every request, you can remove the `matcher`.
diff --git a/examples/middleware/app/about/page.tsx b/examples/middleware/app/about/page.tsx
new file mode 100644
index 0000000000000..9c8145d3bbd01
--- /dev/null
+++ b/examples/middleware/app/about/page.tsx
@@ -0,0 +1,3 @@
+export default function AboutPage() {
+ return
About
;
+}
diff --git a/examples/middleware/app/about2/page.tsx b/examples/middleware/app/about2/page.tsx
new file mode 100644
index 0000000000000..76a7a4e29651a
--- /dev/null
+++ b/examples/middleware/app/about2/page.tsx
@@ -0,0 +1,3 @@
+export default function About2Page() {
+ return
About 2
;
+}
diff --git a/examples/middleware/app/another/page.tsx b/examples/middleware/app/another/page.tsx
new file mode 100644
index 0000000000000..b80bfc7640195
--- /dev/null
+++ b/examples/middleware/app/another/page.tsx
@@ -0,0 +1,3 @@
+export default function AnotherPage() {
+ return
Another
;
+}
diff --git a/examples/middleware/app/layout.tsx b/examples/middleware/app/layout.tsx
new file mode 100644
index 0000000000000..81e02eca6fd10
--- /dev/null
+++ b/examples/middleware/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+export const metadata: Metadata = {
+ title: "Next.js Middleware example",
+ description: "Redirect and rewrite pages using Next.js Middleware.",
+};
diff --git a/examples/middleware/app/page.tsx b/examples/middleware/app/page.tsx
new file mode 100755
index 0000000000000..b294d00c403f2
--- /dev/null
+++ b/examples/middleware/app/page.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function Home() {
+ return (
+
+
Index
+
+ Go to about page (will redirect)
+
+
+ Go to another page (will rewrite)
+
+
+ Go to about 2 page (no redirect or rewrite)
+
+
+ );
+}
diff --git a/examples/middleware/app/redirected/page.tsx b/examples/middleware/app/redirected/page.tsx
new file mode 100644
index 0000000000000..fa383f3ffa5c2
--- /dev/null
+++ b/examples/middleware/app/redirected/page.tsx
@@ -0,0 +1,3 @@
+export default function RedirectedPage() {
+ return
Redirected from /about
;
+}
diff --git a/examples/middleware/app/rewrite/page.tsx b/examples/middleware/app/rewrite/page.tsx
new file mode 100644
index 0000000000000..9f1c1e57ff081
--- /dev/null
+++ b/examples/middleware/app/rewrite/page.tsx
@@ -0,0 +1,3 @@
+export default function RewritePage() {
+ return