Example: add middleware rewrite and 404 test pages

Author: fwang

example/middleware.js

@@ -1,6 +1,11 @@
 import { NextResponse } from "next/server";
 
 export async function middleware(request) {
+  if (request.nextUrl.pathname === "/middleware-rewrite") {
+    const { nextUrl: url } = request
+    url.searchParams.set("rewritten", "true")
+    return NextResponse.rewrite(url);
+  }
   if (request.nextUrl.pathname === "/middleware-redirect") {
     return NextResponse.redirect(new URL("/middleware-redirect-destination", request.url));
   }
@@ -42,5 +47,11 @@ export async function middleware(request) {
 }
 
 export const config = {
-  matcher: ["/middleware-redirect", "/middleware-set-header", "/middleware-fetch", "/middleware-geolocation"],
+  matcher: [
+    "/middleware-rewrite",
+    "/middleware-redirect",
+    "/middleware-set-header",
+    "/middleware-fetch",
+    "/middleware-geolocation",
+  ],
 }

example/pages/index.js

@@ -31,12 +31,14 @@ export default function Home({}) {
         <Link href={`/ssr-redirect`}>Server Side Rendering — redirect</Link><br />
         <Link href={`/ssr-not-found`}>Server Side Rendering — page not found</Link><br />
         <Link href={`/api-route`}>API Route</Link><br />
+        <Link href={`/middleware-rewrite`}>Middleware — rewrite</Link><br />
         <Link href={`/middleware-redirect`}>Middleware — redirect</Link><br />
         <Link href={`/middleware-set-header`}>Middleware — set header</Link><br />
         <Link href={`/middleware-geolocation`}>Middleware — geolocation</Link><br />
         <Link href={`/image-optimization-imported`}>Image Optimization — imported image</Link><br />
         <Link href={`/image-optimization-remote`}>Image Optimization — remote image</Link><br />
         <Link href={`/image-html-tag`}>Image using html image tag</Link><br />
+        <Link href={`/page-does-not-exist`}>404 Page not found</Link><br />
       </section>
     </Layout>
   );

example/pages/middleware-rewrite.js

@@ -0,0 +1,27 @@
+import Layout from "../components/layout";
+
+export async function getServerSideProps(context) {
+  return {
+    props: {
+      isRewritten: context.query.rewritten === "true"
+        ? "✅"
+        : "❌",
+    },
+  };
+}
+
+export default function Page({ isRewritten }) {
+  return (
+    <Layout>
+      <article>
+        <h1>
+          Middleware - rewrite
+        </h1>
+        <hr />
+        <p>
+          <b>Test 1:</b>URL is rewritten { isRewritten }
+        </p>
+      </article>
+    </Layout>
+  );
+}