Feature/next 12 2

starters/next/package.json

@@ -140,7 +140,7 @@
     "lodash": "^4.17.19",
     "mongoose": "6",
     "nanoid": "^3.1.25",
-    "next": "^12.1.6",
+    "next": "latest",
     "next-connect": "^0.9.1",
     "next-i18next": "^8.10.0",
     "next-mdx-remote": "3",

starters/next/src/middleware.ts

@@ -0,0 +1,22 @@
+import { NextFetchEvent, NextRequest } from "next/server";
+import {
+  debugMatcher,
+  debugMiddleware,
+} from "~/vulcan-demo/edge-middlewares/debugMiddleware";
+import {
+  megaparamMatcher,
+  megaParamMiddleware,
+} from "~/vulcan-demo/edge-middlewares/megaparamMiddleware";
+
+export function middleware(req: NextRequest, event: NextFetchEvent) {
+  // TODO: how to reuse the "debugMatcher" which is not really a regex?
+  if (req.url.match(/debug/)) {
+    return debugMiddleware(req, event);
+  }
+  if (req.url.match(/megaparam-demo/)) {
+    return megaParamMiddleware(req, event);
+  }
+}
+export const config = {
+  matchers: [debugMatcher], //, megaparamMatcher],
+};

starters/next/src/pages/api/vn/examples/megaparam-form.tsx

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export default async (req: NextRequest) => {
+  // TODO: this doesn't work because we cannot use a POST request here
+  // otherwise we fail to redirect using a GET afterwards
+  // const formData = await req.formData();
+  // const theme = formData.get("theme")?.toString();
+  // const company = formData.get("company")?.toString();
+  const url = new URL(req.url);
+  const theme = url.searchParams.get("theme");
+  const company = url.searchParams.get("company");
+
+  // Redirect back to the page with an absolute URL
+  const pageUrl = new URL("/vn/examples/megaparam-demo", req.url);
+  const res = NextResponse.redirect(pageUrl);
+
+  if (theme && ["light", "dark"].includes(theme)) {
+    res.cookies.set("theme", theme);
+  }
+  if (company) {
+    res.cookies.set("my_company", company);
+  }
+  return res;
+};
+
+export const config = {
+  runtime: "experimental-edge",
+};

starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx

@@ -1,6 +1,8 @@
+// NOTE: after Next 12.2 update, the corresponding middleware now lives in
+// src/vulcan-demo/edge-middlewares/megaparamMiddleware.ts
 import { GetStaticPaths } from "next";
 import { GetStaticProps, InferGetStaticPropsType } from "next";
-import { useRouter } from "next/dist/client/router";
+// import { useRouter } from "next/router";
 
 /**
  * Run the server and open
@@ -10,7 +12,7 @@ export const MegaparamDemo = ({
   params,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { theme, company } = params;
-  const router = useRouter();
+  //const router = useRouter();
   return (
     <div
       style={{
@@ -41,14 +43,19 @@ export const MegaparamDemo = ({
         </a>
       </p>
       <form
+        action="/api/vn/examples/megaparam-form"
+        // If you use a POST method, you won't be able to redirect back to the form using a edge API handler
+        //method="POST"
+        /*
+        Old JS version
         onSubmit={(evt) => {
           evt.preventDefault();
           const theme = evt.target["theme"]?.value;
           const company = evt.target["company"]?.value;
           (window as any).cookieStore.set("company", company);
           (window as any).cookieStore.set("theme", theme);
           router.reload();
-        }}
+        }}*/
       >
         <label htmlFor="theme">Pick a theme:</label>
         <select id="theme" name="theme" defaultValue={theme}>

starters/next/src/pages/vn/debug/_middleware.ts → starters/next/src/vulcan-demo/edge-middlewares/debugMiddleware.ts

@@ -1,6 +1,8 @@
 import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
 
-export function middleware(req: NextRequest, ev: NextFetchEvent) {
+export const debugMatcher = "/vn/debug/:path*";
+
+export function debugMiddleware(req: NextRequest, ev: NextFetchEvent) {
   // @see https://nextjs.org/docs/messages/middleware-relative-urls
   if (
     process.env.NODE_ENV === "production" &&

starters/next/src/vulcan-demo/edge-middlewares/megaparamMiddleware.ts

@@ -0,0 +1,32 @@
+import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
+
+import { encode } from "~/pages/vn/examples/[M]/megaparam-demo";
+export const megaparamMatcher = "/vn/examples/:M/megaparam-demo";
+// @see https://blog.vulcanjs.org/render-anything-statically-with-next-js-and-the-megaparam-4039e66ffde
+export function megaParamMiddleware(req: NextRequest, event: NextFetchEvent) {
+  // get the current params from the cookies, eg theme
+  // you can also get them from headers, url, route params...
+  const theme = req.cookies.get("theme") || "light";
+  if (!["light", "dark"].includes(theme)) {
+    throw new Error(
+      `Valid themes are light and dark, received ${theme}. Clear your cookies and try again.`
+    );
+  }
+  const company = req.cookies.get("company") || "Unknown_company";
+  // Here, you could run some checks, like
+  // verifying that current user can actually access this company
+  // and that the theme is valid
+  const isValid = true;
+  if (!isValid) {
+    throw new Error("User cannot access company");
+  }
+  // convert to a megaparam
+  const megaparam = encode({
+    theme,
+    company,
+  });
+  // This patterns guarantee that the URL is absolute
+  req.nextUrl.pathname = `/vn/examples/${megaparam}/megaparam-demo`;
+  const res = NextResponse.rewrite(req.nextUrl);
+  return res;
+}