Merge branch 'main' into rs/react-env-var-fix

Author: orinokai

cypress/e2e/middleware/enhanced.cy.ts

@@ -13,6 +13,12 @@ describe('Enhanced middleware', () => {
     })
   })
 
+  it('passes in headers within request.rewrite()', () => {
+    cy.request('/request-rewrite').then((response) => {
+      expect(response.headers).to.have.property('x-rewrite-test', 'hello')
+    })
+  })
+
   it('rewrites the response body using request.next()', () => {
     cy.visit('/static')
     cy.get('#message').contains('This was static (& escaping test &) but has been transformed in')

cypress/e2e/middleware/standard.cy.ts

@@ -45,6 +45,12 @@ describe('Standard middleware', () => {
       expect(response.headers).to.have.property('x-foo', 'bar')
     })
   })
+
+  it('preserves locale on rewrites (skipMiddlewareUrlNormalize: true)', () => {
+    cy.visit('/de-de/locale-preserving-rewrite')
+    cy.get('div').should('contain', 'Locale: de-DE')
+    cy.url().should('eq', `${Cypress.config().baseUrl}/de-de/locale-preserving-rewrite`)
+  })
 })
 
 describe('Middleware matchers', () => {

demos/middleware/middleware.ts

@@ -21,7 +21,9 @@ export async function middleware(req: NextRequest) {
   }
 
   const request = new MiddlewareRequest(req)
-  if (pathname.startsWith('/static')) {
+
+  // skipMiddlewareUrlNormalize next config option is used so we have to try to match both html path and data blob path
+  if (pathname.startsWith('/static') || pathname.endsWith('/static.json')) {
     // Unlike NextResponse.next(), this actually sends the request to the origin
     const res = await request.next()
     const message = `This was static (& escaping test &) but has been transformed in ${req.geo?.city}`
@@ -36,9 +38,16 @@ export async function middleware(req: NextRequest) {
     return res
   }
 
-  if (pathname.startsWith('/request-rewrite')) {
+  // skipMiddlewareUrlNormalize next config option is used so we have to try to match both html path and data blob path
+  if (pathname.startsWith('/request-rewrite') || pathname.endsWith('/request-rewrite.json')) {
     // request.rewrite() should return the MiddlewareResponse object instead of the Response object.
-    const res = await request.rewrite('/static-rewrite')
+    const res = await request.rewrite('/static-rewrite',
+    {
+      headers: {
+        'x-rewrite-test': 'hello',
+        'x-rewrite-test-2': 'hello-2'
+      }
+    })
     const message = `This was static (& escaping test &) but has been transformed in ${req.geo?.city}`
 
     // Transform the response HTML and props
@@ -100,6 +109,10 @@ export async function middleware(req: NextRequest) {
     return response
   }
 
+  if (pathname.includes('locale-preserving-rewrite')) {
+    return NextResponse.rewrite(new URL('/locale-test', req.url))
+  }
+
   if (pathname.startsWith('/shows')) {
     if (pathname.startsWith('/shows/222')) {
       response = NextResponse.next()
@@ -151,6 +164,7 @@ export const config = {
   matcher: [
     '/api/:all*',
     '/headers',
+    '/:all*/locale-preserving-rewrite',
     '/cookies/:path*',
     { source: '/static' },
     {source: '/request-rewrite' },

demos/middleware/next.config.js

@@ -11,6 +11,7 @@ const nextConfig = {
     defaultLocale: 'en',
     locales: ['en', 'de-DE'],
   },
+  skipMiddlewareUrlNormalize: true,
 }
 
 module.exports = nextConfig

demos/middleware/pages/locale-test.js

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const Page = ({ pageLocale }) => {
+  return <div>Locale: {pageLocale}</div>
+}
+
+export async function getServerSideProps({ locale }) {
+  return {
+    props: {
+      pageLocale: locale,
+    },
+  }
+}
+
+export default Page