vercel · samcx · May 13, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git 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
@@ -0,0 +1,3 @@
+export default function AboutPage() {
+  return <h1>About</h1>;
+}
diff --git a/examples/middleware/app/about2/page.tsx b/examples/middleware/app/about2/page.tsx
@@ -0,0 +1,3 @@
+export default function About2Page() {
+  return <h1>About 2</h1>;
+}
diff --git a/examples/middleware/app/another/page.tsx b/examples/middleware/app/another/page.tsx
@@ -0,0 +1,3 @@
+export default function AnotherPage() {
+  return <h1>Another</h1>;
+}
diff --git a/examples/middleware/app/layout.tsx b/examples/middleware/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'Next.js Middleware example',
+  description: 'Redirect and rewrite pages using Next.js Middleware.',
+}
diff --git a/examples/middleware/pages/index.tsx → examples/middleware/app/page.tsx b/examples/middleware/pages/index.tsx → examples/middleware/app/page.tsx
@@ -1,27 +1,24 @@
-import type { NextPage } from "next";
 import Link from "next/link";
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
     <div>
       <h1>Index</h1>
       <p>
-        <Link href="/about" passHref>
+        <Link href="/about">
           Go to about page (will redirect)
         </Link>
       </p>
       <p>
-        <Link href="/another" passHref>
+        <Link href="/another">
           Go to another page (will rewrite)
         </Link>
       </p>
       <p>
-        <Link href="/about2" passHref>
+        <Link href="/about2">
           Go to about 2 page (no redirect or rewrite)
         </Link>
       </p>
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/examples/middleware/app/redirected/page.tsx b/examples/middleware/app/redirected/page.tsx
@@ -0,0 +1,3 @@
+export default function RedirectedPage() {
+  return <h1>Redirected from /about</h1>;
+}
diff --git a/examples/middleware/app/rewrite/page.tsx b/examples/middleware/app/rewrite/page.tsx
@@ -0,0 +1,3 @@
+export default function RewritePage() {
+  return <h1>Rewrite</h1>;
+}
diff --git a/examples/middleware/next.config.js b/examples/middleware/next.config.js
diff --git a/examples/middleware/pages/_app.tsx b/examples/middleware/pages/_app.tsx
diff --git a/examples/middleware/pages/about.tsx b/examples/middleware/pages/about.tsx
diff --git a/examples/middleware/pages/about2.tsx b/examples/middleware/pages/about2.tsx
diff --git a/examples/middleware/pages/another.tsx b/examples/middleware/pages/another.tsx
diff --git a/examples/middleware/pages/redirected.tsx b/examples/middleware/pages/redirected.tsx
diff --git a/examples/middleware/pages/rewrite.tsx b/examples/middleware/pages/rewrite.tsx
diff --git a/examples/middleware/tsconfig.json b/examples/middleware/tsconfig.json
@@ -13,8 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }