Merge pull request #23035 from github/repo-sync

repo sync

middleware/handle-errors.js

@@ -67,6 +67,7 @@ export default async function handleError(error, req, res, next) {
 
     // Special handling for when a middleware calls `next(404)`
     if (error === 404) {
+      // Note that if this fails, it will swallow that error.
       return nextApp.render404(req, res)
     }
 

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
@@ -111,17 +111,23 @@ MyApp.getInitialProps = async (appContext: AppContext) => {
   const languagesContext: LanguagesContextT = {
     languages: {},
   }
-  for (const [langCode, langObj] of Object.entries(
-    req.context.languages as Record<string, LanguageItem>
-  )) {
-    if (langObj.wip) continue
-    // Only pick out the keys we actually need
-    languagesContext.languages[langCode] = {
-      name: langObj.name,
-      code: langObj.code,
-    }
-    if (langObj.nativeName) {
-      languagesContext.languages[langCode].nativeName = langObj.nativeName
+
+  // If we're rendering certain 404 error pages, the middleware might not
+  // yet have contextualized the `context.languages`. So omit this
+  // context mutation and live without it.
+  if (req.context.languages) {
+    for (const [langCode, langObj] of Object.entries(
+      req.context.languages as Record<string, LanguageItem>
+    )) {
+      if (langObj.wip) continue
+      // Only pick out the keys we actually need
+      languagesContext.languages[langCode] = {
+        name: langObj.name,
+        code: langObj.code,
+      }
+      if (langObj.nativeName) {
+        languagesContext.languages[langCode].nativeName = langObj.nativeName
+      }
     }
   }
 

tests/routing/next.js

@@ -8,5 +8,12 @@ describe('redirects', () => {
   test('any _next/image request should 404', async () => {
     const res = await get('/_next/image?what=ever')
     expect(res.statusCode).toBe(404)
+    expect(res.headers['content-type']).toMatch('text/html')
+  })
+
+  test('any _next.* request should 404', async () => {
+    const res = await get('/_next.php.hack.junk')
+    expect(res.statusCode).toBe(404)
+    expect(res.headers['content-type']).toMatch('text/html')
   })
 })