rayan/next.js
1
0
Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity

first commit
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Details
Test examples / Test Examples (22) (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Trigger Release / start (push) Has been cancelled
Details
Stale issue handler / stale (push) Has been cancelled
Details
Update Font Data / create-pull-request (push) Has been cancelled
Details
build-and-deploy / deploy-target (push) Has been cancelled
Details
build-and-deploy / build (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
Details
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
Details
build-and-deploy / build-wasm (web) (push) Has been cancelled
Details
build-and-deploy / Deploy preview tarball (push) Has been cancelled
Details
build-and-deploy / Potentially publish release (push) Has been cancelled
Details
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
Details
build-and-deploy / Deploy examples (push) Has been cancelled
Details
build-and-deploy / thank you, build (push) Has been cancelled
Details
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Details
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Details
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Details
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Details
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Details
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Details
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Details
Update React / create-pull-request (push) Has been cancelled
Details
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Details
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Arian Tron
2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
test/development/app-dir/cache-components-dev-fallback-validation/app/complete/[top]/layout.tsx Normal file
View File

@@ -0,0 +1,11 @@
export function generateStaticParams() {
return [{ top: 'prerendered' }]
}
export default async function Layout({
children,
}: {
children: React.ReactNode
}) {
return children
}

13
test/development/app-dir/cache-components-dev-fallback-validation/app/complete/[top]/unwrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
export function generateStaticParams() {
return [{ bottom: 'prerendered' }]
}
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

10
test/development/app-dir/cache-components-dev-fallback-validation/app/complete/[top]/unwrapped/layout.tsx Normal file
View File

@@ -0,0 +1,10 @@
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return children
}

13
test/development/app-dir/cache-components-dev-fallback-validation/app/complete/[top]/wrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
export function generateStaticParams() {
return [{ bottom: 'prerendered' }]
}
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

12
test/development/app-dir/cache-components-dev-fallback-validation/app/complete/[top]/wrapped/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Suspense } from 'react'
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
}

BIN
test/development/app-dir/cache-components-dev-fallback-validation/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

172
test/development/app-dir/cache-components-dev-fallback-validation/app/layout.tsx Normal file
View File

@@ -0,0 +1,172 @@
export default function Root({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<main>
<h1>Validating Fallback Shells in Dev</h1>
<p>
This App is made up of a number of sub-pages which exercise the
Cache Components validation performed in dev to ensure it matches up
with the validation performed during the build.
</p>
<p>
When Building routes with dynamic params we validate that the
prerender produces an acceptable static shell. If we do not have a
complete set of params for any given page we will use a special kind
of param called a fallback param which suspends as dynamic and is
required to be wrapped in Suspense if accessed so we can ensure
there is still an acceptable shell even when we don't know about
specific values for that param.
</p>
<p>
In Dev, our validation needs to match and the way we do this is we
look at the current route and determine the most specific set of
params that would be availalbe during the build and then use the
remaining fallback params for the validation render. This way if you
see an error during the build you should be able to debug that error
during development too.
</p>
<p>
Click on some of the sample links for the routes
'.../[top]/.../[bottom]'
</p>
<section>
<h2>Complete Params</h2>
<p>
These links are for routes where the build has a complete set of
params to prerender with. We don't expect these to fail at all
during validation because nothing is dynamic on these pages other
than possible param access
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/complete/prerendered/wrapped/prerendered">
/complete/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/complete/prerendered/wrapped/novel">
/complete/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/complete/novel/wrapped/novel">
/complete/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/complete/prerendered/unwrapped/prerendered">
/complete/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/complete/prerendered/unwrapped/novel">
/complete/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/complete/novel/unwrapped/novel">
/complete/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
<section>
<h2>Partial Params</h2>
<p>
These links are for routes where the top param is prerendered
during the build but the bottom param is not. We expect that if
you attempt to access the bottom param without a wrapping Suspense
boundary it will fail validation
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/partial/prerendered/wrapped/prerendered">
/partial/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/partial/prerendered/wrapped/novel">
/partial/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/partial/novel/wrapped/novel">
/partial/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/partial/prerendered/unwrapped/prerendered">
/partial/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/partial/prerendered/unwrapped/novel">
/partial/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/partial/novel/unwrapped/novel">
/partial/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
<section>
<h2>No Params</h2>
<p>
These links are for routes where there are no params provided
during the build at all. We expect these to fail validation if you
attempt to access the params above a Suspense boundary.
</p>
<h3>Suspense between [top] and [bottom]</h3>
<ul>
<li>
<a href="/none/prerendered/wrapped/prerendered">
/none/prerendered/wrapped/prerendered
</a>
</li>
<li>
<a href="/none/prerendered/wrapped/novel">
/none/prerendered/wrapped/novel
</a>
</li>
<li>
<a href="/none/novel/wrapped/novel">
/none/novel/wrapped/novel
</a>
</li>
</ul>
<h3>No Suspense</h3>
<ul>
<li>
<a href="/none/prerendered/unwrapped/prerendered">
/none/prerendered/unwrapped/prerendered
</a>
</li>
<li>
<a href="/none/prerendered/unwrapped/novel">
/none/prerendered/unwrapped/novel
</a>
</li>
<li>
<a href="/none/novel/unwrapped/novel">
/none/novel/unwrapped/novel
</a>
</li>
</ul>
</section>
</main>
</body>
</html>
)
}

7
test/development/app-dir/cache-components-dev-fallback-validation/app/none/[top]/layout.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default async function Layout({
children,
}: {
children: React.ReactNode
}) {
return children
}

9
test/development/app-dir/cache-components-dev-fallback-validation/app/none/[top]/unwrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

10
test/development/app-dir/cache-components-dev-fallback-validation/app/none/[top]/unwrapped/layout.tsx Normal file
View File

@@ -0,0 +1,10 @@
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return children
}

9
test/development/app-dir/cache-components-dev-fallback-validation/app/none/[top]/wrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

12
test/development/app-dir/cache-components-dev-fallback-validation/app/none/[top]/wrapped/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Suspense } from 'react'
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
}

3
test/development/app-dir/cache-components-dev-fallback-validation/app/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return null
}

11
test/development/app-dir/cache-components-dev-fallback-validation/app/partial/[top]/layout.tsx Normal file
View File

@@ -0,0 +1,11 @@
export function generateStaticParams() {
return [{ top: 'prerendered' }]
}
export default async function Layout({
children,
}: {
children: React.ReactNode
}) {
return children
}

9
test/development/app-dir/cache-components-dev-fallback-validation/app/partial/[top]/unwrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

10
test/development/app-dir/cache-components-dev-fallback-validation/app/partial/[top]/unwrapped/layout.tsx Normal file
View File

@@ -0,0 +1,10 @@
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return children
}

9
test/development/app-dir/cache-components-dev-fallback-validation/app/partial/[top]/wrapped/[bottom]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default async function Page(props: {
params: Promise<{ top: string; bottom: string }>
}) {
return (
<p>
Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
</p>
)
}

12
test/development/app-dir/cache-components-dev-fallback-validation/app/partial/[top]/wrapped/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Suspense } from 'react'
export default async function Layout({
children,
params,
}: {
children: React.ReactNode
params: Promise<{ top: string }>
}) {
await params
return <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
}

604
test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts Normal file
View File

@@ -0,0 +1,604 @@
import { nextTestSetup } from 'e2e-utils'
import { waitForNoRedbox } from 'next-test-utils'
describe('Cache Components Fallback Validation', () => {
const { isTurbopack, next } = nextTestSetup({
files: __dirname,
})
it('should not warn about missing Suspense when accessing params if static params are completely known at build time', async () => {
// when the params are complete we don't expect to see any errors await params regarless of where there
// are Suspense boundaries.
const browser = await next.browser(
'/complete/prerendered/wrapped/prerendered'
)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/complete/prerendered/wrapped/novel`)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/complete/novel/wrapped/novel`)
await waitForNoRedbox(browser)
await browser.loadPage(
`${next.url}/complete/prerendered/unwrapped/prerendered`
)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/complete/prerendered/unwrapped/novel`)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/complete/novel/unwrapped/novel`)
await waitForNoRedbox(browser)
})
it('should warn about missing Suspense when accessing params if static params are partially known at build time', async () => {
// when the params are partially complete we don't expect to see any errors awaiting the params that are known
// but do expect errors awaiting the params that are not known if not inside a Suspense boundary.
const browser = await next.browser(
'/partial/prerendered/wrapped/prerendered'
)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/partial/prerendered/wrapped/novel`)
await waitForNoRedbox(browser)
await browser.loadPage(`${next.url}/partial/novel/wrapped/novel`)
await waitForNoRedbox(browser)
await browser.loadPage(
`${next.url}/partial/prerendered/unwrapped/prerendered`
)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
}
await browser.loadPage(`${next.url}/partial/prerendered/unwrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
}
await browser.loadPage(`${next.url}/partial/novel/unwrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
| ^",
"stack": [
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
],
}
`)
}
})
it('should warn about missing Suspense when accessing params if static params are entirely missing at build time', async () => {
// when the params are partially complete we don't expect to see any errors awaiting the params that are known
// but do expect errors awaiting the params that are not known if not inside a Suspense boundary.
const browser = await next.browser('/none/prerendered/wrapped/prerendered')
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
}
await browser.loadPage(`${next.url}/none/prerendered/wrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
}
await browser.loadPage(`${next.url}/none/novel/wrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
> 10 | await params
| ^",
"stack": [
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
],
}
`)
}
await browser.loadPage(`${next.url}/none/prerendered/unwrapped/prerendered`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
}
await browser.loadPage(`${next.url}/none/prerendered/unwrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
}
await browser.loadPage(`${next.url}/none/novel/unwrapped/novel`)
if (isTurbopack) {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
} else {
await expect(browser).toDisplayCollapsedRedbox(`
{
"code": "E1083",
"description": "Runtime data was accessed outside of <Suspense>
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. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.
To fix this:
Provide a fallback UI using <Suspense> around this component.
or
Move the Runtime data access into a deeper component wrapped in <Suspense>.
In either case this allows Next.js to stream its contents to the user when they request the page, while still providing an initial UI that is prerendered and prefetchable for instant navigations.
Learn more: https://nextjs.org/docs/messages/blocking-route",
"environmentLabel": "Server",
"label": "Blocking Route",
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
> 8 | await params
| ^",
"stack": [
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
],
}
`)
}
})
})

8
test/development/app-dir/cache-components-dev-fallback-validation/next.config.js Normal file
View File

@@ -0,0 +1,8 @@
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
cacheComponents: true,
}
module.exports = nextConfig