From 1d647d2dbbac3bd8568feabb624db31aeda663b7 Mon Sep 17 00:00:00 2001
From: Klein Torres <39591589+kleintorres@users.noreply.github.com>
Date: Sat, 10 Dec 2022 13:35:48 +0100
Subject: [PATCH 1/4] Fix browser navigation buttons not working with shallow
routing and middleware
---
packages/next/shared/lib/router/router.ts | 16 +++++++---------
1 file changed, 7 insertions(+), 9 deletions(-)
diff --git a/packages/next/shared/lib/router/router.ts b/packages/next/shared/lib/router/router.ts
index c9c06916706fce6..b31ef9238bacbd1 100644
--- a/packages/next/shared/lib/router/router.ts
+++ b/packages/next/shared/lib/router/router.ts
@@ -1440,15 +1440,13 @@ export default class Router implements BaseRouter {
// we don't attempt resolve asPath when we need to execute
// middleware as the resolving will occur server-side
- const isMiddlewareMatch = await matchesMiddleware({
- asPath: as,
- locale: nextState.locale,
- router: this,
- })
-
- if (options.shallow && isMiddlewareMatch) {
- pathname = this.pathname
- }
+ const isMiddlewareMatch =
+ !options.shallow &&
+ (await matchesMiddleware({
+ asPath: as,
+ locale: nextState.locale,
+ router: this,
+ }))
if (isQueryUpdating && isMiddlewareMatch) {
shouldResolveHref = false
From 244deb481ee07b9c3e6308903a826e3394cd72dd Mon Sep 17 00:00:00 2001
From: Klein Torres <39591589+kleintorres@users.noreply.github.com>
Date: Mon, 12 Dec 2022 12:14:32 +0100
Subject: [PATCH 2/4] Added test for shallow routing using middleware
---
.../middleware-shallow-link/app/middleware.js | 9 ++++
.../app/pages/index.js | 26 +++++++++++
.../app/pages/page2.js | 25 +++++++++++
.../e2e/middleware-shallow-link/index.test.ts | 44 +++++++++++++++++++
4 files changed, 104 insertions(+)
create mode 100644 test/e2e/middleware-shallow-link/app/middleware.js
create mode 100644 test/e2e/middleware-shallow-link/app/pages/index.js
create mode 100644 test/e2e/middleware-shallow-link/app/pages/page2.js
create mode 100644 test/e2e/middleware-shallow-link/index.test.ts
diff --git a/test/e2e/middleware-shallow-link/app/middleware.js b/test/e2e/middleware-shallow-link/app/middleware.js
new file mode 100644
index 000000000000000..dd6b55cae5e94fc
--- /dev/null
+++ b/test/e2e/middleware-shallow-link/app/middleware.js
@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server'
+
+export async function middleware() {
+ return NextResponse.next()
+}
+
+export const config = {
+ matcher: '/(.*$)',
+}
diff --git a/test/e2e/middleware-shallow-link/app/pages/index.js b/test/e2e/middleware-shallow-link/app/pages/index.js
new file mode 100644
index 000000000000000..97b4c0b8699d66b
--- /dev/null
+++ b/test/e2e/middleware-shallow-link/app/pages/index.js
@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import React from 'react'
+
+const Page = () => {
+ return (
+ <>
+
Content for page 1
+
+
+ Shallow push
+
+
+
+
+ Go to page 2
+
+
+ >
+ )
+}
+
+export default Page
diff --git a/test/e2e/middleware-shallow-link/app/pages/page2.js b/test/e2e/middleware-shallow-link/app/pages/page2.js
new file mode 100644
index 000000000000000..a8de1b6f668295d
--- /dev/null
+++ b/test/e2e/middleware-shallow-link/app/pages/page2.js
@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import React from 'react'
+
+const Page = () => {
+ return (
+ <>
+ Content for page 2
+
+ Shallow replace
+
+
+
+
+ >
+ )
+}
+
+export default Page
diff --git a/test/e2e/middleware-shallow-link/index.test.ts b/test/e2e/middleware-shallow-link/index.test.ts
new file mode 100644
index 000000000000000..42556537e63dbcf
--- /dev/null
+++ b/test/e2e/middleware-shallow-link/index.test.ts
@@ -0,0 +1,44 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { BrowserInterface } from 'test/lib/browsers/base'
+import { join } from 'path'
+
+describe('browser-shallow-navigation', () => {
+ let next: NextInstance
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ pages: new FileRef(join(__dirname, 'app/pages')),
+ 'middleware.js': new FileRef(join(__dirname, 'app/middleware.js')),
+ },
+ })
+ })
+
+ afterAll(() => next.destroy())
+
+ it('should render the correct page', async () => {
+ const browser = await webdriver(next.url, '/')
+
+ /// do shallow push
+ await browser.elementByCss('[data-next-shallow-push]').click()
+ await new Promise((resolve) => setTimeout(resolve, 500))
+
+ // go to another page
+ await browser.elementByCss('[data-next-page]').click()
+ await new Promise((resolve) => setTimeout(resolve, 500))
+
+ // do shadow replace
+ await browser.elementByCss('[data-next-shallow-replace]').click()
+ await new Promise((resolve) => setTimeout(resolve, 500))
+
+ // go back using history api
+ await browser.elementByCss('[data-go-back]').click()
+
+ // get page h1
+ let title = await browser.elementByCss('h1').text()
+ expect(title).toContain('Content for page 1')
+ })
+})
From db91d019284b196b2ed8f8fd3ad0822460bff464 Mon Sep 17 00:00:00 2001
From: JJ Kasper
Date: Mon, 12 Dec 2022 19:17:40 -0800
Subject: [PATCH 3/4] update test setTimeouts
---
test/e2e/middleware-shallow-link/index.test.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/test/e2e/middleware-shallow-link/index.test.ts b/test/e2e/middleware-shallow-link/index.test.ts
index 42556537e63dbcf..df85083faf6a3c8 100644
--- a/test/e2e/middleware-shallow-link/index.test.ts
+++ b/test/e2e/middleware-shallow-link/index.test.ts
@@ -24,15 +24,15 @@ describe('browser-shallow-navigation', () => {
/// do shallow push
await browser.elementByCss('[data-next-shallow-push]').click()
- await new Promise((resolve) => setTimeout(resolve, 500))
+ await browser.waitForElementByCss('[data-next-page]')
// go to another page
await browser.elementByCss('[data-next-page]').click()
- await new Promise((resolve) => setTimeout(resolve, 500))
+ await browser.waitForElementByCss('[data-next-shallow-replace]')
// do shadow replace
await browser.elementByCss('[data-next-shallow-replace]').click()
- await new Promise((resolve) => setTimeout(resolve, 500))
+ await browser.waitForElementByCss('[data-go-back]')
// go back using history api
await browser.elementByCss('[data-go-back]').click()
From 82e3c2579debf565c2c2951fd5c2cc5d368f5bd3 Mon Sep 17 00:00:00 2001
From: JJ Kasper
Date: Mon, 12 Dec 2022 19:25:55 -0800
Subject: [PATCH 4/4] lint-fix
---
test/e2e/middleware-shallow-link/index.test.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/test/e2e/middleware-shallow-link/index.test.ts b/test/e2e/middleware-shallow-link/index.test.ts
index df85083faf6a3c8..b97cc5ee955603c 100644
--- a/test/e2e/middleware-shallow-link/index.test.ts
+++ b/test/e2e/middleware-shallow-link/index.test.ts
@@ -1,8 +1,6 @@
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP } from 'next-test-utils'
import webdriver from 'next-webdriver'
-import { BrowserInterface } from 'test/lib/browsers/base'
import { join } from 'path'
describe('browser-shallow-navigation', () => {