From e2f902aa5074d31b8d6602db1b9b21b80795b946 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 29 Jun 2022 15:55:29 +0200 Subject: [PATCH 1/2] setup a root edge-middleware --- starters/next/package.json | 2 +- starters/next/src/middleware.ts | 22 +++ .../pages/vn/examples/[M]/megaparam-demo.tsx | 2 + .../edge-middlewares/debugMiddleware.ts} | 4 +- .../edge-middlewares/megaparamMiddleware.ts} | 9 +- yarn.lock | 143 ++++++++++-------- 6 files changed, 115 insertions(+), 67 deletions(-) create mode 100644 starters/next/src/middleware.ts rename starters/next/src/{pages/vn/debug/_middleware.ts => vulcan-demo/edge-middlewares/debugMiddleware.ts} (88%) rename starters/next/src/{pages/vn/examples/[M]/_middleware.ts => vulcan-demo/edge-middlewares/megaparamMiddleware.ts} (69%) 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..fc7760e5 --- /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/vn/examples/[M]/megaparam-demo.tsx b/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx index ce9f9d4f..ca2882ca 100644 --- a/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx +++ b/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx @@ -1,3 +1,5 @@ +// 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"; diff --git a/starters/next/src/pages/vn/debug/_middleware.ts b/starters/next/src/vulcan-demo/edge-middlewares/debugMiddleware.ts similarity index 88% rename from starters/next/src/pages/vn/debug/_middleware.ts rename to starters/next/src/vulcan-demo/edge-middlewares/debugMiddleware.ts index 305f43fe..8635bdaa 100644 --- a/starters/next/src/pages/vn/debug/_middleware.ts +++ b/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" && diff --git a/starters/next/src/pages/vn/examples/[M]/_middleware.ts b/starters/next/src/vulcan-demo/edge-middlewares/megaparamMiddleware.ts similarity index 69% rename from starters/next/src/pages/vn/examples/[M]/_middleware.ts rename to starters/next/src/vulcan-demo/edge-middlewares/megaparamMiddleware.ts index e989ca11..8ba9e6d4 100644 --- a/starters/next/src/pages/vn/examples/[M]/_middleware.ts +++ b/starters/next/src/vulcan-demo/edge-middlewares/megaparamMiddleware.ts @@ -1,8 +1,9 @@ -import type { NextFetchEvent, NextRequest } from "next/server"; -import { NextResponse } from "next/server"; -import { encode } from "./megaparam-demo"; +import { NextFetchEvent, NextRequest, NextResponse } from "next/server"; -export function middleware(req: NextRequest, event: NextFetchEvent) { +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["theme"] || "light") as "light" | "dark"; diff --git a/yarn.lock b/yarn.lock index a8f7949b..9ae4f4ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4628,10 +4628,10 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:12.1.6": - version: 12.1.6 - resolution: "@next/env@npm:12.1.6" - checksum: e6a4f189f0d653d13dc7ad510f6c9d2cf690bfd9e07c554bd501b840f8dabc3da5adcab874b0bc01aab86c3647cff4fb84692e3c3b28125af26f0b05cd4c7fcf +"@next/env@npm:12.2.0": + version: 12.2.0 + resolution: "@next/env@npm:12.2.0" + checksum: 5fb317bdb5eb2d5df12ff55e335368792dba21874c5ece3cabf8cd312cec911a1d54ecf368e69dc08640b0244669b8a98c86cd035c7874b17640602e67c1b9d9 languageName: node linkType: hard @@ -4663,86 +4663,93 @@ __metadata: languageName: node linkType: hard -"@next/swc-android-arm-eabi@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-android-arm-eabi@npm:12.1.6" +"@next/swc-android-arm-eabi@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-android-arm-eabi@npm:12.2.0" conditions: os=android & cpu=arm languageName: node linkType: hard -"@next/swc-android-arm64@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-android-arm64@npm:12.1.6" +"@next/swc-android-arm64@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-android-arm64@npm:12.2.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-darwin-arm64@npm:12.1.6" +"@next/swc-darwin-arm64@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-darwin-arm64@npm:12.2.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-darwin-x64@npm:12.1.6" +"@next/swc-darwin-x64@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-darwin-x64@npm:12.2.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm-gnueabihf@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-linux-arm-gnueabihf@npm:12.1.6" +"@next/swc-freebsd-x64@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-freebsd-x64@npm:12.2.0" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@next/swc-linux-arm-gnueabihf@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-linux-arm-gnueabihf@npm:12.2.0" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-linux-arm64-gnu@npm:12.1.6" +"@next/swc-linux-arm64-gnu@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-linux-arm64-gnu@npm:12.2.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-linux-arm64-musl@npm:12.1.6" +"@next/swc-linux-arm64-musl@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-linux-arm64-musl@npm:12.2.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-linux-x64-gnu@npm:12.1.6" +"@next/swc-linux-x64-gnu@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-linux-x64-gnu@npm:12.2.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-linux-x64-musl@npm:12.1.6" +"@next/swc-linux-x64-musl@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-linux-x64-musl@npm:12.2.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-win32-arm64-msvc@npm:12.1.6" +"@next/swc-win32-arm64-msvc@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-win32-arm64-msvc@npm:12.2.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-win32-ia32-msvc@npm:12.1.6" +"@next/swc-win32-ia32-msvc@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-win32-ia32-msvc@npm:12.2.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:12.1.6": - version: 12.1.6 - resolution: "@next/swc-win32-x64-msvc@npm:12.1.6" +"@next/swc-win32-x64-msvc@npm:12.2.0": + version: 12.2.0 + resolution: "@next/swc-win32-x64-msvc@npm:12.2.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -8504,6 +8511,15 @@ __metadata: languageName: node linkType: hard +"@swc/helpers@npm:0.4.2": + version: 0.4.2 + resolution: "@swc/helpers@npm:0.4.2" + dependencies: + tslib: ^2.4.0 + checksum: 0b8c86ad03b17b8fe57dc4498e25dc294ea6bc42558a6b92d8fcd789351dac80199409bef38a2e3ac06aae0fedddfc0ab9c34409acbf74e55d1bbbd74f68b6b7 + languageName: node + linkType: hard + "@szmarczak/http-timer@npm:^1.1.2": version: 1.1.2 resolution: "@szmarczak/http-timer@npm:1.1.2" @@ -26606,26 +26622,29 @@ __metadata: languageName: node linkType: hard -"next@npm:^12.1.6": - version: 12.1.6 - resolution: "next@npm:12.1.6" - dependencies: - "@next/env": 12.1.6 - "@next/swc-android-arm-eabi": 12.1.6 - "@next/swc-android-arm64": 12.1.6 - "@next/swc-darwin-arm64": 12.1.6 - "@next/swc-darwin-x64": 12.1.6 - "@next/swc-linux-arm-gnueabihf": 12.1.6 - "@next/swc-linux-arm64-gnu": 12.1.6 - "@next/swc-linux-arm64-musl": 12.1.6 - "@next/swc-linux-x64-gnu": 12.1.6 - "@next/swc-linux-x64-musl": 12.1.6 - "@next/swc-win32-arm64-msvc": 12.1.6 - "@next/swc-win32-ia32-msvc": 12.1.6 - "@next/swc-win32-x64-msvc": 12.1.6 +"next@npm:latest": + version: 12.2.0 + resolution: "next@npm:12.2.0" + dependencies: + "@next/env": 12.2.0 + "@next/swc-android-arm-eabi": 12.2.0 + "@next/swc-android-arm64": 12.2.0 + "@next/swc-darwin-arm64": 12.2.0 + "@next/swc-darwin-x64": 12.2.0 + "@next/swc-freebsd-x64": 12.2.0 + "@next/swc-linux-arm-gnueabihf": 12.2.0 + "@next/swc-linux-arm64-gnu": 12.2.0 + "@next/swc-linux-arm64-musl": 12.2.0 + "@next/swc-linux-x64-gnu": 12.2.0 + "@next/swc-linux-x64-musl": 12.2.0 + "@next/swc-win32-arm64-msvc": 12.2.0 + "@next/swc-win32-ia32-msvc": 12.2.0 + "@next/swc-win32-x64-msvc": 12.2.0 + "@swc/helpers": 0.4.2 caniuse-lite: ^1.0.30001332 postcss: 8.4.5 styled-jsx: 5.0.2 + use-sync-external-store: 1.1.0 peerDependencies: fibers: ">= 3.1.0" node-sass: ^6.0.0 || ^7.0.0 @@ -26641,6 +26660,8 @@ __metadata: optional: true "@next/swc-darwin-x64": optional: true + "@next/swc-freebsd-x64": + optional: true "@next/swc-linux-arm-gnueabihf": optional: true "@next/swc-linux-arm64-gnu": @@ -26666,7 +26687,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 670d544fd47670c29681d10824e6da625e9d4a048e564c8d9cb80d37f33c9ff9b5ca0a53e6d84d8d618b1fe7c9bb4e6b45040cb7e57a5c46b232a8f914425dc1 + checksum: 38456c33935122ac1581367e4982034be23269039a8470a66443d710334336f8f3fb587f25d172d138d84cf18c01d3a76627fb610c2e2e57bd1692277c23fa2b languageName: node linkType: hard @@ -34785,7 +34806,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:~2.4.0": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:~2.4.0": version: 2.4.0 resolution: "tslib@npm:2.4.0" checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113 @@ -35847,7 +35868,7 @@ __metadata: languageName: node linkType: hard -"use-sync-external-store@npm:^1.0.0": +"use-sync-external-store@npm:1.1.0, use-sync-external-store@npm:^1.0.0": version: 1.1.0 resolution: "use-sync-external-store@npm:1.1.0" peerDependencies: @@ -36354,7 +36375,7 @@ __metadata: mongodb-memory-server: ^8.4.0 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 From 2918b1ca4f286aa76e6d7b430d637f80c3ba789d Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 29 Jun 2022 17:01:33 +0200 Subject: [PATCH 2/2] use a root middleware and demo an API edge handler --- starters/next/src/middleware.ts | 2 +- .../pages/api/vn/examples/megaparam-form.tsx | 28 +++++++++++++++++++ .../pages/vn/examples/[M]/megaparam-demo.tsx | 11 ++++++-- .../edge-middlewares/megaparamMiddleware.ts | 19 +++++++------ 4 files changed, 47 insertions(+), 13 deletions(-) create mode 100644 starters/next/src/pages/api/vn/examples/megaparam-form.tsx diff --git a/starters/next/src/middleware.ts b/starters/next/src/middleware.ts index fc7760e5..1ae34e7f 100644 --- a/starters/next/src/middleware.ts +++ b/starters/next/src/middleware.ts @@ -18,5 +18,5 @@ export function middleware(req: NextRequest, event: NextFetchEvent) { } } export const config = { - matchers: [debugMatcher, megaparamMatcher], + 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]/megaparam-demo.tsx b/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx index ca2882ca..cb649a9f 100644 --- a/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx +++ b/starters/next/src/pages/vn/examples/[M]/megaparam-demo.tsx @@ -2,7 +2,7 @@ // 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 @@ -12,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; @@ -50,7 +55,7 @@ export const MegaparamDemo = ({ (window as any).cookieStore.set("company", company); (window as any).cookieStore.set("theme", theme); router.reload(); - }} + }}*/ >