Example: add middleware geolocation test

Author: fwang

example/middleware.js

@@ -25,8 +25,22 @@ export async function middleware(request) {
     console.log(await fetch("https://webhook.site/facbcacc-08f2-4fb1-b67f-a26e3382b64e"));
     return NextResponse.next();
   }
+  if (request.nextUrl.pathname === "/middleware-geolocation") {
+    const { nextUrl: url, geo } = request
+    console.log("== request", request);
+    console.log("== geo", geo);
+    const country = geo.country || "US"
+    const city = geo.city || "San Francisco"
+    const region = geo.region || "CA"
+  
+    url.searchParams.set('country', country)
+    url.searchParams.set('city', city)
+    url.searchParams.set('region', region)
+  
+    return NextResponse.rewrite(url);
+  }
 }
 
 export const config = {
-  matcher: ["/middleware-redirect", "/middleware-set-header", "/middleware-fetch"],
+  matcher: ["/middleware-redirect", "/middleware-set-header", "/middleware-fetch", "/middleware-geolocation"],
 }

example/pages/index.js

@@ -33,6 +33,7 @@ export default function Home({}) {
         <Link href={`/api-route`}>API Route</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 />

example/pages/middleware-geolocation.js

@@ -0,0 +1,19 @@
+import { useRouter } from "next/router";
+import Layout from "../components/layout";
+
+export default function Page() {
+  return (
+    <Layout>
+      <article>
+        <h1>
+          Middleware - geolocation
+        </h1>
+        <hr />
+        <p>
+          <b>Test 1:</b>
+          URL query contains country, city, and region: {JSON.stringify(useRouter().query)}
+        </p>
+      </article>
+    </Layout>
+  );
+}