From 63bb219ae218c61c13d0fb5c0c62e6aa304ac780 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 26 Oct 2021 16:23:58 +0200 Subject: [PATCH 1/6] Improve deprecation errors for new middleware API --- errors/manifest.json | 4 ++ errors/middleware-new-signature.md | 35 +++++++++++++++++ .../webpack/loaders/next-middleware-loader.ts | 3 +- packages/next/server/web/adapter.ts | 38 ++++++++++++------- packages/next/server/web/error.ts | 6 ++- .../server/web/spec-extension/fetch-event.ts | 20 +++++++--- 6 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 errors/middleware-new-signature.md diff --git a/errors/manifest.json b/errors/manifest.json index 0145ee2569fb416..4d19b214c514467 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -502,6 +502,10 @@ { "title": "swc-minify-enabled", "path": "/errors/swc-minify-enabled.md" + }, + { + "title": "middleware-new-signature", + "path": "/errors/middleware-new-signature.md" } ] } diff --git a/errors/middleware-new-signature.md b/errors/middleware-new-signature.md new file mode 100644 index 000000000000000..603e2916017b39f --- /dev/null +++ b/errors/middleware-new-signature.md @@ -0,0 +1,35 @@ +# Middleware new signature + +#### Why This Error Occurred + +Your application is using a Middleware function and your are using its parameters as with the deprecated API. + +```typescript +import { NextResponse } from 'next/server' + +export function middleware(event) { + if (event.request.nextUrl.pathname === '/blocked') { + event.respondWith( + new Response(null, { + status: 403, + }) + ) + } +} +``` + +#### Possible Ways to Fix It + +You can use the Middleware function with the most recent API: + +```typescript +import { NextResponse } from 'next/server' + +export function middleware(request) { + if (request.nextUrl.pathname === '/blocked') { + return new Response(null, { + status: 403, + }) + } +} +``` diff --git a/packages/next/build/webpack/loaders/next-middleware-loader.ts b/packages/next/build/webpack/loaders/next-middleware-loader.ts index d036508e177b3a6..4768d485216fe08 100644 --- a/packages/next/build/webpack/loaders/next-middleware-loader.ts +++ b/packages/next/build/webpack/loaders/next-middleware-loader.ts @@ -26,7 +26,8 @@ export default function middlewareLoader(this: any) { export default function (opts) { return adapter({ ...opts, - handler + page: ${JSON.stringify(page)}, + handler, }) } ` diff --git a/packages/next/server/web/adapter.ts b/packages/next/server/web/adapter.ts index 32e210c4c5921a9..057337f25fb32b1 100644 --- a/packages/next/server/web/adapter.ts +++ b/packages/next/server/web/adapter.ts @@ -8,22 +8,27 @@ import { waitUntilSymbol } from './spec-compliant/fetch-event' export async function adapter(params: { handler: (request: NextRequest, event: NextFetchEvent) => Promise + page: string request: RequestData }): Promise { const url = params.request.url.startsWith('/') ? `https://${params.request.headers.host}${params.request.url}` : params.request.url - const request = new NextRequestHint(url, { - geo: params.request.geo, - headers: fromNodeHeaders(params.request.headers), - ip: params.request.ip, - method: params.request.method, - nextConfig: params.request.nextConfig, - page: params.request.page, + const request = new NextRequestHint({ + page: params.page, + input: url, + init: { + geo: params.request.geo, + headers: fromNodeHeaders(params.request.headers), + ip: params.request.ip, + method: params.request.method, + nextConfig: params.request.nextConfig, + page: params.request.page, + }, }) - const event = new NextFetchEvent(request) + const event = new NextFetchEvent({ request, page: params.page }) const original = await params.handler(request, event) return { @@ -33,19 +38,26 @@ export async function adapter(params: { } class NextRequestHint extends NextRequest { - constructor(input: Request | string, init: RequestInit = {}) { - super(input, init) + sourcePage: string + + constructor(params: { + init: RequestInit + input: Request | string + page: string + }) { + super(params.input, params.init) + this.sourcePage = params.page } get request() { - throw new DeprecationError() + throw new DeprecationError({ page: this.sourcePage }) } respondWith() { - throw new DeprecationError() + throw new DeprecationError({ page: this.sourcePage }) } waitUntil() { - throw new DeprecationError() + throw new DeprecationError({ page: this.sourcePage }) } } diff --git a/packages/next/server/web/error.ts b/packages/next/server/web/error.ts index 8efcdfb0836444b..d7f0f2dbb4efb2c 100644 --- a/packages/next/server/web/error.ts +++ b/packages/next/server/web/error.ts @@ -1,10 +1,12 @@ export class DeprecationError extends Error { - constructor() { - super(`Middleware now accepts an async API directly with the form: + constructor({ page }: { page: string }) { + super(`The middleware "${page}" accepts an async API directly with the form: export function middleware(request, event) { return new Response("Hello " + request.url) } + + More: https://nextjs.org/docs/messages/middleware-new-signature `) } } diff --git a/packages/next/server/web/spec-extension/fetch-event.ts b/packages/next/server/web/spec-extension/fetch-event.ts index 1d6d704ed3bdb85..4e1af9e28a1a08b 100644 --- a/packages/next/server/web/spec-extension/fetch-event.ts +++ b/packages/next/server/web/spec-extension/fetch-event.ts @@ -3,13 +3,23 @@ import { FetchEvent } from '../spec-compliant/fetch-event' import { NextRequest } from './request' export class NextFetchEvent extends FetchEvent { - readonly request: NextRequest - constructor(request: NextRequest) { - super(request) - this.request = request + sourcePage: string + + constructor(params: { request: NextRequest; page: string }) { + super(params.request) + this.sourcePage = params.page + } + + // @ts-ignore + get request() { + throw new DeprecationError({ + page: this.sourcePage, + }) } respondWith() { - throw new DeprecationError() + throw new DeprecationError({ + page: this.sourcePage, + }) } } From c56eb1a8b92c8066e0fdfb9c90fce39986f4195f Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 26 Oct 2021 16:30:05 +0200 Subject: [PATCH 2/6] Update errors/middleware-new-signature.md Co-authored-by: JJ Kasper --- errors/middleware-new-signature.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/middleware-new-signature.md b/errors/middleware-new-signature.md index 603e2916017b39f..9e026fe9fe2d78c 100644 --- a/errors/middleware-new-signature.md +++ b/errors/middleware-new-signature.md @@ -2,7 +2,7 @@ #### Why This Error Occurred -Your application is using a Middleware function and your are using its parameters as with the deprecated API. +Your application is using a Middleware function that is using parameters from the deprecated API. ```typescript import { NextResponse } from 'next/server' From 45259d206b45950e4a6718d5d1433a116c48bc51 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 26 Oct 2021 16:30:22 +0200 Subject: [PATCH 3/6] Update errors/middleware-new-signature.md Co-authored-by: JJ Kasper --- errors/middleware-new-signature.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/errors/middleware-new-signature.md b/errors/middleware-new-signature.md index 9e026fe9fe2d78c..1a4598877543b48 100644 --- a/errors/middleware-new-signature.md +++ b/errors/middleware-new-signature.md @@ -20,7 +20,7 @@ export function middleware(event) { #### Possible Ways to Fix It -You can use the Middleware function with the most recent API: +Update to use the new API for Middleware: ```typescript import { NextResponse } from 'next/server' From 7f375bec585d2422869febdf5cb2cef8b19ad28d Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 26 Oct 2021 10:43:28 -0400 Subject: [PATCH 4/6] Apply suggestions from code review --- errors/middleware-new-signature.md | 4 +++- packages/next/server/web/error.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/errors/middleware-new-signature.md b/errors/middleware-new-signature.md index 1a4598877543b48..723450286d3f986 100644 --- a/errors/middleware-new-signature.md +++ b/errors/middleware-new-signature.md @@ -1,10 +1,11 @@ -# Middleware new signature +# Deprecated Middleware API Signature #### Why This Error Occurred Your application is using a Middleware function that is using parameters from the deprecated API. ```typescript +// _middleware.js import { NextResponse } from 'next/server' export function middleware(event) { @@ -23,6 +24,7 @@ export function middleware(event) { Update to use the new API for Middleware: ```typescript +// _middleware.js import { NextResponse } from 'next/server' export function middleware(request) { diff --git a/packages/next/server/web/error.ts b/packages/next/server/web/error.ts index d7f0f2dbb4efb2c..ebe14d9f27d78a5 100644 --- a/packages/next/server/web/error.ts +++ b/packages/next/server/web/error.ts @@ -6,7 +6,7 @@ export class DeprecationError extends Error { return new Response("Hello " + request.url) } - More: https://nextjs.org/docs/messages/middleware-new-signature + Read more: https://nextjs.org/docs/messages/middleware-new-signature `) } } From a4a5cf1f9c77ebadb2219d18e5257dfe16f21bd7 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 26 Oct 2021 10:48:45 -0400 Subject: [PATCH 5/6] Apply suggestions from code review Co-authored-by: JJ Kasper --- errors/middleware-new-signature.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/errors/middleware-new-signature.md b/errors/middleware-new-signature.md index 723450286d3f986..b7bb43307b5ce6d 100644 --- a/errors/middleware-new-signature.md +++ b/errors/middleware-new-signature.md @@ -11,7 +11,7 @@ import { NextResponse } from 'next/server' export function middleware(event) { if (event.request.nextUrl.pathname === '/blocked') { event.respondWith( - new Response(null, { + new NextResponse(null, { status: 403, }) ) @@ -29,7 +29,7 @@ import { NextResponse } from 'next/server' export function middleware(request) { if (request.nextUrl.pathname === '/blocked') { - return new Response(null, { + return new NextResponse(null, { status: 403, }) } From 02938e22bb1353cf674bfc536959a0f8111c0780 Mon Sep 17 00:00:00 2001 From: "jj@jjsweb.site" Date: Tue, 26 Oct 2021 09:59:30 -0500 Subject: [PATCH 6/6] fix request set error --- packages/next/server/web/spec-compliant/fetch-event.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/next/server/web/spec-compliant/fetch-event.ts b/packages/next/server/web/spec-compliant/fetch-event.ts index c410d39736e9f1f..916b32b6da186cd 100644 --- a/packages/next/server/web/spec-compliant/fetch-event.ts +++ b/packages/next/server/web/spec-compliant/fetch-event.ts @@ -3,15 +3,10 @@ export const passThroughSymbol = Symbol('passThrough') export const waitUntilSymbol = Symbol('waitUntil') export class FetchEvent { - readonly request: Request; readonly [waitUntilSymbol]: Promise[] = []; [responseSymbol]?: Promise; [passThroughSymbol] = false - constructor(request: Request) { - this.request = request - } - respondWith(response: Response | Promise): void { if (!this[responseSymbol]) { this[responseSymbol] = Promise.resolve(response)