diff --git a/pages-e2e/features/appMiddleware/assets/app/middleware-test/page/page.jsx b/pages-e2e/features/appMiddleware/assets/app/middleware-test/pageA/page.jsx
similarity index 95%
rename from pages-e2e/features/appMiddleware/assets/app/middleware-test/page/page.jsx
rename to pages-e2e/features/appMiddleware/assets/app/middleware-test/pageA/page.jsx
index b9084d328..cd8c4a4ad 100644
--- a/pages-e2e/features/appMiddleware/assets/app/middleware-test/page/page.jsx
+++ b/pages-e2e/features/appMiddleware/assets/app/middleware-test/pageA/page.jsx
@@ -8,7 +8,7 @@ export default function Page() {
 
 	return (
 		<div>
-			<h1>Some Page</h1>
+			<h1>Page A</h1>
 			<h2>Headers</h2>
 			<p>The request contained the following headers:</p>
 			<ul>
diff --git a/pages-e2e/features/appMiddleware/assets/app/middleware-test/pageB/page.jsx b/pages-e2e/features/appMiddleware/assets/app/middleware-test/pageB/page.jsx
new file mode 100644
index 000000000..ff5b19182
--- /dev/null
+++ b/pages-e2e/features/appMiddleware/assets/app/middleware-test/pageB/page.jsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+
+export default function Page() {
+	const links = [
+		{
+			href: '/middleware-test/pageC?redirect-to-page-a',
+			text: 'go to page A via middleware redirect',
+		},
+		{
+			href: '/middleware-test/pageC?rewrite-to-page-a',
+			text: 'go to page C which is page A served via middleware rewrite',
+		},
+	];
+
+	return (
+		<div>
+			<h1>Page B</h1>
+			{links.map(({ href, text }) => (
+				<div key={href}>
+					<Link href={href}>{text}</Link>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export const runtime = 'edge';
diff --git a/pages-e2e/features/appMiddleware/assets/middleware.js b/pages-e2e/features/appMiddleware/assets/middleware.js
index ed15ac871..dffaacf71 100644
--- a/pages-e2e/features/appMiddleware/assets/middleware.js
+++ b/pages-e2e/features/appMiddleware/assets/middleware.js
@@ -17,12 +17,14 @@ export function middleware(request) {
 		return new NextResponse('The requested route is non-existent');
 	}
 
-	if (request.nextUrl.searchParams.has('rewrite-to-page')) {
-		return NextResponse.rewrite(new URL('/middleware-test/page', request.url));
+	if (request.nextUrl.searchParams.has('rewrite-to-page-a')) {
+		return NextResponse.rewrite(new URL('/middleware-test/pageA', request.url));
 	}
 
-	if (request.nextUrl.searchParams.has('redirect-to-page')) {
-		return NextResponse.redirect(new URL('/middleware-test/page', request.url));
+	if (request.nextUrl.searchParams.has('redirect-to-page-a')) {
+		return NextResponse.redirect(
+			new URL('/middleware-test/pageA', request.url),
+		);
 	}
 
 	if (request.nextUrl.searchParams.has('set-request-headers')) {
diff --git a/pages-e2e/features/appMiddleware/middleware.test.ts b/pages-e2e/features/appMiddleware/middleware.test.ts
index 8caae8cf1..074466e15 100644
--- a/pages-e2e/features/appMiddleware/middleware.test.ts
+++ b/pages-e2e/features/appMiddleware/middleware.test.ts
@@ -73,12 +73,12 @@ describe('App Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		expect(page.url()).toEqual(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
 		);
 	});
 
@@ -87,15 +87,12 @@ describe('App Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page-a`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
-		const url = page.url();
-		const fixedUrlForLocalTesting = url.replace('localhost', '127.0.0.1');
-		expect(fixedUrlForLocalTesting).toEqual(
-			`${DEPLOYMENT_URL}/middleware-test/page`,
-		);
+		await assertVisible('h1', { hasText: 'Page A' });
+		// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+		expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
 	});
 
 	test('request headers modification', async ({ expect }) => {
@@ -107,15 +104,15 @@ describe('App Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/middleware-test/page?set-request-headers`,
+			`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		expect(page.url()).toEqual(
-			`${DEPLOYMENT_URL}/middleware-test/page?set-request-headers`,
+			`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		await assertVisible('li#header-req-header-set-from-middleware');
 		expect(
 			await page
@@ -181,4 +178,46 @@ describe('App Middleware', () => {
 			'middleware-test-count=1',
 		);
 	});
+
+	describe('with client-side navigation', () => {
+		test('redirection to page', async ({ expect }) => {
+			const page = await BROWSER.newPage();
+			const assertVisible = getAssertVisible(page);
+
+			await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);
+
+			await assertVisible('h1', { hasText: 'Page B' });
+			await page
+				.locator('a[href="/middleware-test/pageC?redirect-to-page-a"]')
+				.click();
+
+			await assertVisible('h1', { hasText: 'Page A' });
+			// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+			expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
+		});
+
+		test('rewrite to page', async ({ expect }) => {
+			const page = await BROWSER.newPage();
+			const assertVisible = getAssertVisible(page);
+
+			await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);
+
+			await assertVisible('h1', { hasText: 'Page B' });
+			await page
+				.locator('a[href="/middleware-test/pageC?rewrite-to-page-a"]')
+				.click();
+
+			await assertVisible('h1', { hasText: 'Page A' });
+			// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+			expect(page.url()).toMatch(
+				/.*\/middleware-test\/pageC\?rewrite-to-page-a$/,
+			);
+		});
+
+		test.skip('middleware to be invoked for each navigation', async ({
+			expect,
+		}) => {
+			// We need access to playwright's browser to be able to set cookies
+		});
+	});
 });
diff --git a/pages-e2e/features/pagesMiddleware/assets/middleware.js b/pages-e2e/features/pagesMiddleware/assets/middleware.js
index 42be690d0..3c4e24fb8 100644
--- a/pages-e2e/features/pagesMiddleware/assets/middleware.js
+++ b/pages-e2e/features/pagesMiddleware/assets/middleware.js
@@ -18,17 +18,19 @@ export function middleware(request) {
 	// 	return new NextResponse('The requested api route is non-existent');
 	// }
 	//
-	// if (request.nextUrl.pathname === '/middleware-test/non-existent/page') {
+	// if (request.nextUrl.pathname === '/middleware-test/non-existent-page') {
 	// 	return new NextResponse('The requested route is non-existent');
 	// }
 	//
 
-	if (request.nextUrl.searchParams.has('rewrite-to-page')) {
-		return NextResponse.rewrite(new URL('/middleware-test-page', request.url));
+	if (request.nextUrl.searchParams.has('rewrite-to-page-a')) {
+		return NextResponse.rewrite(new URL('/middleware-test/pageA', request.url));
 	}
 
-	if (request.nextUrl.searchParams.has('redirect-to-page')) {
-		return NextResponse.redirect(new URL('/middleware-test-page', request.url));
+	if (request.nextUrl.searchParams.has('redirect-to-page-a')) {
+		return NextResponse.redirect(
+			new URL('/middleware-test/pageA', request.url),
+		);
 	}
 
 	if (request.nextUrl.searchParams.has('set-request-headers')) {
@@ -92,5 +94,5 @@ export function middleware(request) {
 }
 
 export const config = {
-	matcher: ['/api/middleware-test/:path*', '/middleware-test-page'],
+	matcher: ['/api/middleware-test/:path*', '/middleware-test/:path*'],
 };
diff --git a/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test-page.jsx b/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageA.jsx
similarity index 97%
rename from pages-e2e/features/pagesMiddleware/assets/pages/middleware-test-page.jsx
rename to pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageA.jsx
index c4567e68f..f68da4f83 100644
--- a/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test-page.jsx
+++ b/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageA.jsx
@@ -13,7 +13,7 @@ export async function getServerSideProps(context) {
 export default function Page({ requestHeaders }) {
 	return (
 		<div>
-			<h1>Some Page</h1>
+			<h1>Page A</h1>
 			<h2>Headers</h2>
 			<p>The request contained the following headers:</p>
 			<ul>
diff --git a/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageB.jsx b/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageB.jsx
new file mode 100644
index 000000000..767797981
--- /dev/null
+++ b/pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageB.jsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+
+export const config = { runtime: 'experimental-edge' };
+
+export default function Page() {
+	const links = [
+		{
+			href: '/middleware-test/pageC?redirect-to-page-a',
+			text: 'go to page A via middleware redirect',
+		},
+		{
+			href: '/middleware-test/pageC?rewrite-to-page-a',
+			text: 'go to page C which is page A served via middleware rewrite',
+		},
+	];
+
+	return (
+		<div>
+			<h1>Page B</h1>
+			{links.map(({ href, text }) => (
+				<div key={href}>
+					<Link href={href}>{text}</Link>
+				</div>
+			))}
+		</div>
+	);
+}
diff --git a/pages-e2e/features/pagesMiddleware/middleware.test.ts b/pages-e2e/features/pagesMiddleware/middleware.test.ts
index 204425368..b4ea3f6bb 100644
--- a/pages-e2e/features/pagesMiddleware/middleware.test.ts
+++ b/pages-e2e/features/pagesMiddleware/middleware.test.ts
@@ -56,12 +56,12 @@ describe('Pages Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		expect(page.url()).toEqual(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
 		);
 	});
 
@@ -70,15 +70,13 @@ describe('Pages Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page`,
+			`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page-a`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		const url = page.url();
-		const fixedUrlForLocalTesting = url.replace('localhost', '127.0.0.1');
-		expect(fixedUrlForLocalTesting).toEqual(
-			`${DEPLOYMENT_URL}/middleware-test-page`,
-		);
+		// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+		expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
 	});
 
 	test('request headers modification', async ({ expect }) => {
@@ -90,12 +88,12 @@ describe('Pages Middleware', () => {
 		const assertVisible = getAssertVisible(page);
 
 		await page.goto(
-			`${DEPLOYMENT_URL}/middleware-test-page?set-request-headers`,
+			`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
 		);
 
-		await assertVisible('h1', { hasText: 'Page' });
+		await assertVisible('h1', { hasText: 'Page A' });
 		expect(page.url()).toEqual(
-			`${DEPLOYMENT_URL}/middleware-test-page?set-request-headers`,
+			`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
 		);
 
 		const isV12 = (await page.content()).includes(
@@ -105,7 +103,7 @@ describe('Pages Middleware', () => {
 		// the headers settings doesn't seem to work in v12, it's probably a Next.js bug
 		// it's probably not worth investigating
 		if (!isV12) {
-			await assertVisible('h1', { hasText: 'Page' });
+			await assertVisible('h1', { hasText: 'Page A' });
 			await assertVisible('li#header-req-header-set-from-middleware');
 			expect(
 				await page
@@ -173,4 +171,46 @@ describe('Pages Middleware', () => {
 			'middleware-test-count=1',
 		);
 	});
+
+	describe('with client-side navigation', () => {
+		test('redirection to page', async ({ expect }) => {
+			const page = await BROWSER.newPage();
+			const assertVisible = getAssertVisible(page);
+
+			await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);
+
+			await assertVisible('h1', { hasText: 'Page B' });
+			await page
+				.locator('a[href="/middleware-test/pageC?redirect-to-page-a"]')
+				.click();
+
+			await assertVisible('h1', { hasText: 'Page A' });
+			// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+			expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
+		});
+
+		test('rewrite to page', async ({ expect }) => {
+			const page = await BROWSER.newPage();
+			const assertVisible = getAssertVisible(page);
+
+			await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);
+
+			await assertVisible('h1', { hasText: 'Page B' });
+			await page
+				.locator('a[href="/middleware-test/pageC?rewrite-to-page-a"]')
+				.click();
+
+			await assertVisible('h1', { hasText: 'Page A' });
+			// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
+			expect(page.url()).toMatch(
+				/.*\/middleware-test\/pageC\?rewrite-to-page-a$/,
+			);
+		});
+
+		test.skip('middleware to be invoked for each navigation', async ({
+			expect,
+		}) => {
+			// We need access to playwright's browser to be able to set cookies
+		});
+	});
 });