Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit96754b6

Browse files
authored
Tweaks to blocking route error message (#85191)
Makes it more clear that `<Suspense>` and "use cache" are separateapproaches for fixing the error, not requirements.<img width="969" height="711" alt="Screenshot 2025-10-21 at 3 09 57 PM"src="https://github.com/user-attachments/assets/34bd2efc-9fee-4aba-82eb-6b395663d765"/>
1 parent48bb490 commit96754b6

File tree

4 files changed

+209
-67
lines changed

4 files changed

+209
-67
lines changed

‎packages/next/src/next-devtools/dev-overlay/container/errors.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -67,22 +67,28 @@ function BlockingPageLoadErrorDescription() {
6767
experience. Next.js uses this error to ensure your app loads instantly
6868
on every navigation.
6969
</p>
70-
<p>To fix this, you can:</p>
71-
<ul>
72-
<li>
73-
Wrap the component in a{'<Suspense>'} boundary. This allows Next.js
74-
to stream its contents to the user as soon as it's ready, without
75-
blocking the rest of the app.
76-
</li>
77-
<li>
70+
<h4>To fix this, you can either:</h4>
71+
<pclassName="nextjs__blocking_page_load_error_fix_option">
72+
<strong>Wrap the component in a{'<Suspense>'} boundary.</strong> This
73+
allows Next.js to stream its contents to the user as soon as it's ready,
74+
without blocking the rest of the app.
75+
</p>
76+
<h4className="nextjs__blocking_page_load_error_fix_option_separator">
77+
or
78+
</h4>
79+
<pclassName="nextjs__blocking_page_load_error_fix_option">
80+
<strong>
7881
Move the asynchronous await into a Cache Component (
79-
<code>"use cache"</code>). This allows Next.js to statically prerender
80-
the component as part of the HTML document, so it's instantly visible
81-
to the user. Note that request-specific information &mdash; such as
82-
params, cookies, and headers &mdash; is not available during static
83-
prerendering.
84-
</li>
85-
</ul>
82+
<code>"use cache"</code>)
83+
</strong>
84+
. This allows Next.js to statically prerender the component as part of
85+
the HTML document, so it's instantly visible to the user.
86+
</p>
87+
<p>
88+
Note that request-specific information &mdash; such as params, cookies,
89+
and headers &mdash; is not available during static prerendering, so must
90+
be wrapped in{'<Suspense>'}.
91+
</p>
8692
<p>
8793
Learn more:{' '}
8894
<ahref="https://nextjs.org/docs/messages/blocking-route">
@@ -400,4 +406,10 @@ export const styles = `
400406
.nextjs__blocking_page_load_error_description_title {
401407
color: var(--color-title-color);
402408
}
409+
.nextjs__blocking_page_load_error_fix_option {
410+
background-color: var(--color-background-200);
411+
padding: 14px;
412+
border-radius: var(--rounded-md-2);
413+
border: 1px solid var(--color-gray-alpha-400);
414+
}
403415
`

‎test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,15 @@ describe('Cache Components Dev Errors', () => {
103103
104104
This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation.
105105
106-
To fix this, you can:
106+
To fix this, you can either:
107107
108108
Wrap the component in a <Suspense> boundary. This allows Next.js to stream its contents to the user as soon as it's ready, without blocking the rest of the app.
109-
Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user. Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering.
109+
110+
or
111+
112+
Move the asynchronous await into a Cache Component ("use cache"). This allows Next.js to statically prerender the component as part of the HTML document, so it's instantly visible to the user.
113+
114+
Note that request-specific information — such as params, cookies, and headers — is not available during static prerendering, so must be wrapped in <Suspense>.
110115
111116
Learn more: https://nextjs.org/docs/messages/blocking-route",
112117
"environmentLabel": "Server",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp