vercel · kodiakhq · Dec 19, 2022 · Dec 12, 2022 · Dec 12, 2022 · Dec 12, 2022
@@ -0,0 +1,3 @@
+export default function Page({ params: { params } }) {
+  return <div id="page">{params.join('/')}</div>
+}
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
@@ -0,0 +1,35 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+const Test = ({ page, href }: { page: string; href?: string }) => {
+  const router = useRouter()
+  href ??= `/${page}-before`
+
+  return (
+    <>
+      <Link id={`link-${page}`} href={href}>
+        Link to /{page}-before
+      </Link>
+      <button id={`button-${page}`} onClick={() => router.push(href)}>
+        Button to /{page}-before
+      </button>
+    </>
+  )
+}
+
+export default function Page() {
+  return (
+    <>
+      <Test page="middleware-rewrite" />
+      <Test page="middleware-redirect" />
+      <Test page="config-rewrite" />
+      <Test page="config-redirect" />
+      <Test
+        page="config-redirect-catchall"
+        href="/config-redirect-catchall-before/thing"
+      />
+    </>
+  )
+}
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/middleware-rewrite-before')) {
+    return NextResponse.rewrite(
+      new URL('/middleware-rewrite-after', request.url)
+    )
+  }
+
+  if (request.nextUrl.pathname.startsWith('/middleware-redirect-before')) {
+    return NextResponse.redirect(
+      new URL('/middleware-redirect-after', request.url)
+    )
+  }
+}
@@ -0,0 +1,28 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    appDir: true,
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/config-rewrite-before',
+        destination: '/config-rewrite-after',
+      },
+    ]
+  },
+  async redirects() {
+    return [
+      {
+        source: '/config-redirect-before',
+        destination: '/config-redirect-after',
+        permanent: true,
+      },
+      {
+        source: '/config-redirect-catchall-before/:path*',
+        destination: '/config-redirect-catchall-after/:path*',
+        permanent: true,
+      },
+    ]
+  },
+}
@@ -0,0 +1,87 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+import { waitFor } from 'next-test-utils'
+
+describe('redirects and rewrites', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: new FileRef(__dirname),
+      dependencies: {
+        react: 'latest',
+        'react-dom': 'latest',
+        typescript: 'latest',
+        '@types/react': 'latest',
+        '@types/node': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  /**
+   * All test will use a link/button to navigate to '/*-before' which should be redirected by correct redirect/rewrite to '/*-after'
+   */
+  describe.each(['link', 'button'])('navigation using %s', (testType) => {
+    it('should rewrite from middleware correctly', async () => {
+      const browser = await webdriver(next.url, '/')
+      browser.elementById(`${testType}-middleware-rewrite`).click()
+      await waitFor(200)
+
+      expect(await browser.elementById('page').text()).toBe(
+        'middleware-rewrite-after'
+      )
+      const url = new URL(await browser.url())
+      expect(url.pathname).toEndWith('-before')
+    })
+
+    it('should redirect from middleware correctly', async () => {
+      const browser = await webdriver(next.url, '/')
+      browser.elementById(`${testType}-middleware-redirect`).click()
+      await waitFor(200)
+
+      expect(await browser.elementById('page').text()).toBe(
+        'middleware-redirect-after'
+      )
+      const url = new URL(await browser.url())
+      expect(url.pathname).toEndWith('-after')
+    })
+
+    it('should rewrite from next.config.js correctly', async () => {
+      const browser = await webdriver(next.url, '/')
+      browser.elementById(`${testType}-config-rewrite`).click()
+      await waitFor(200)
+
+      expect(await browser.elementById('page').text()).toBe(
+        'config-rewrite-after'
+      )
+      const url = new URL(await browser.url())
+      expect(url.pathname).toEndWith('-before')
+    })
+
+    it('should redirect from next.config.js correctly', async () => {
+      const browser = await webdriver(next.url, '/')
+      browser.elementById(`${testType}-config-redirect`).click()
+      await waitFor(200)
+
+      expect(await browser.elementById('page').text()).toBe(
+        'config-redirect-after'
+      )
+      const url = new URL(await browser.url())
+      expect(url.pathname).toEndWith('-after')
+    })
+
+    it('should redirect using catchall from next.config.js correctly', async () => {
+      const browser = await webdriver(next.url, '/')
+      browser.elementById(`${testType}-config-redirect-catchall`).click()
+      await waitFor(200)
+
+      expect(await browser.elementById('page').text()).toBe(
+        'config-redirect-catchall-after/thing'
+      )
+      const url = new URL(await browser.url())
+      expect(url.pathname).toEndWith('-after/thing')
+    })
+  })
+})