New app directory crashes on Range requests if `next/navigation` or `next/headers` is used

smaeda-ks commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

13.0.2, 13.0.3-canary.1
Deployed on Vercel

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

The new app directory (Next.js 13) returns INTERNAL_SERVER_ERROR 500 error when using useSearchParams from next/navigation AND if a Range request header is sent.

UPDATE: Looks like using next/headers also triggers the same error. which let me think staticGenerationBailout is somewhat related (it’s referenced by next/navigation or next/headers).

This is causing an issue with some crawlers such as Facebook Crawler as they send a Range request header: https://developers.facebook.com/docs/sharing/webmasters/crawler/

Expected Behavior

Should not return 500. The response should be either 200/206/416: https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests#partial_request_responses

Link to reproduction

To Reproduce

curl -svo /dev/null 'https://next13-plane-500-test-2.vercel.app/' -H 'range: bytes=0-1'

curl -svo /dev/null 'https://app-dir.vercel.app/' -H 'range: bytes=0-1'

* https://github.com/vercel/app-playground/blob/main/ui/AddressBar.tsx#L4-L8

Create a new app with npx create-next-app@latest --experimental-app and make the following changes:

diff --git a/app/page.tsx b/app/page.tsx
index 35bd264..2a1b72d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
 import Image from 'next/image'
 import styles from './page.module.css'
+import { headers } from 'next/headers';

 export default function Home() {
+  const headersList = headers();
   return (
     <div className={styles.container}>
       <main className={styles.main}>

Can't reproduce locally ($ vercel dev).

cly commented 1 year ago

Thanks for looking into this!

vic9511 commented 7 months ago

same thing, i just added import { headers } from 'next/headers'; const headersList = headers(); and the app crashed on vercel deployment (Can't reproduce locally)

vercel / next.js