diff --git a/starters/next/package.json b/starters/next/package.json index a1009dca..0e424728 100644 --- a/starters/next/package.json +++ b/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", diff --git a/starters/next/src/middleware.ts b/starters/next/src/middleware.ts new file mode 100644 index 00000000..1ae34e7f --- /dev/null +++ b/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], +}; diff --git a/starters/next/src/pages/api/vn/examples/megaparam-form.tsx b/starters/next/src/pages/api/vn/examples/megaparam-form.tsx new file mode 100644 index 00000000..8dbbbce1 --- /dev/null +++ b/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", +}; diff --git a/starters/next/src/pages/vn/examples/[M]/_middleware.ts b/starters/next/src/pages/vn/examples/[M]/_middleware.ts deleted file mode 100644 index e989ca11..00000000 --- a/starters/next/src/pages/vn/examples/[M]/_middleware.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { NextFetchEvent, NextRequest } from "next/server"; -import { NextResponse } from "next/server"; -import { encode } from "./megaparam-demo"; - -export function middleware(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["theme"] || "light") as "light" | "dark"; - const company = req.cookies["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; - // 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); - // remember theme if not yet done - if (!req.cookies["theme"]) { - res.cookies["theme"] = theme; - } - if (!req.cookies["company"]) { - res.cookies["my_company"] = theme; - } - return res; -} diff --git a/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx b/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx index ce9f9d4f..cb649a9f 100644 --- a/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx +++ b/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) => { const { theme, company } = params; - const router = useRouter(); + //const router = useRouter(); return (

{ evt.preventDefault(); const theme = evt.target["theme"]?.value; @@ -48,7 +55,7 @@ export const MegaparamDemo = ({ (window as any).cookieStore.set("company", company); (window as any).cookieStore.set("theme", theme); router.reload(); - }} + }}*/ >