Use edge geolocation to center the map

src/middleware.page.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// run only on homepage
+export const config = {
+  matcher: '/',
+};
+
+export async function middleware(req: NextRequest) {
+  const { nextUrl: url, geo } = req;
+  console.log(geo);
+  if (!url.searchParams.has('lat') && geo && geo.latitude && geo.longitude) {
+    url.searchParams.append('lat', geo.latitude);
+    url.searchParams.append('lng', geo.longitude);
+  }
+
+  return NextResponse.redirect(url);
+}

src/pages/_app.page.tsx

@@ -13,14 +13,28 @@ const App = (props) => {
   const sharedStatePaths = ['/', '/loos/[id]'];
   const key =
     sharedStatePaths.indexOf(router.pathname) > -1 ? 'shared' : router.asPath;
+
+  const center = useMemo(
+    () =>
+      router.query.lat && router.query.lng
+        ? {
+            lat: parseFloat(router.query.lat as string),
+            lng: parseFloat(router.query.lng as string),
+          }
+        : null,
+    [router.query],
+  );
+
+  console.log(center);
+
   const renderedMap = useMemo(
     () =>
       key === 'shared' ? (
         <Suspense>
-          <LooMap minZoom={5} />
+          <LooMap minZoom={5} {...(center ? { center } : {})} />
         </Suspense>
       ) : undefined,
-    [key]
+    [key, center],
   );
 
   return (