diff --git a/docs/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx b/docs/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx
index 91261c114031c..0bffa7457777f 100644
--- a/docs/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/10-parallel-routes.mdx
@@ -15,7 +15,7 @@ For example, considering a dashboard, you can use parallel routes to simultaneou
srcLight="/docs/light/parallel-routes.png"
srcDark="/docs/dark/parallel-routes.png"
width="1600"
- height="952"
+ height="942"
/>
## Slots
@@ -33,28 +33,32 @@ Parallel routes are created using named **slots**. Slots are defined with the `@
Slots are passed as props to the shared parent layout. For the example above, the component in `app/layout.js` now accepts the `@analytics` and `@team` slots props, and can render them in parallel alongside the `children` prop:
```tsx filename="app/layout.tsx" switcher
-export default function Layout(props: {
+export default function Layout({
+ children,
+ team,
+ analytics,
+}: {
children: React.ReactNode
analytics: React.ReactNode
team: React.ReactNode
}) {
return (
<>
- {props.children}
- {props.team}
- {props.analytics}
+ {children}
+ {team}
+ {analytics}
)
}
```
```jsx filename="app/layout.js" switcher
-export default function Layout(props) {
+export default function Layout({ children, team, analytics }) {
return (
<>
- {props.children}
- {props.team}
- {props.analytics}
+ {children}
+ {team}
+ {analytics}
)
}
@@ -71,17 +75,17 @@ However, slots are **not** [route segments](/docs/app/building-your-application/
By default, Next.js keeps track of the active _state_ (or subpage) for each slot. However, the content rendered within a slot will depend on the type of navigation:
- [**Soft Navigation**](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation): During client-side navigation, Next.js will perform a [partial render](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering), changing the subpage within the slot, while maintaining the other slot's active subpages, even if they don't match the current URL.
-- **Hard Navigation**: After a full-page load (browser refresh), Next.js cannot determine the active state of slots that don't match the current URL. Instead, it will render a [`default.js`](#defaultjs) file for the unmatched slots, or `404` if `default.js` doesn't exist.
+- **Hard Navigation**: After a full-page load (browser refresh), Next.js cannot determine the active state for the slots that don't match the current URL. Instead, it will render a [`default.js`](#defaultjs) file for the unmatched slots, or `404` if `default.js` doesn't exist.
> **Good to know**:
>
-> - The `404` for unmatched routes helps ensure that you don't accidentally render a route that shouldn't be parallel rendered.
+> - The `404` for unmatched routes helps ensure that you don't accidentally render a parallel route on a page that it was not intended for.
### `default.js`
You can define a `default.js` file to render as a fallback for unmatched slots during the initial load or full-page reload.
-Consider the following folder structure. The `@team` slot has a `settings` page, but `@analytics` does not.
+Consider the following folder structure. The `@team` slot has a `/settings` page, but `@analytics` does not.
` component that can be shown by navigating to a matching route, for example `/login`.
+```tsx filename="app/dashboard/layout.tsx" switcher
+import { checkUserRole } from '@/lib/auth'
-```tsx filename="app/layout.tsx" switcher
-export default async function Layout(props: {
- // ...
- auth: React.ReactNode
+export default function Layout({
+ user,
+ admin,
+}: {
+ user: React.ReactNode
+ admin: React.ReactNode
}) {
+ const role = checkUserRole()
+ return <>{role === 'admin' ? admin : user}
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import { checkUserRole } from '@/lib/auth'
+
+export default function Layout({ user, admin }) {
+ const role = checkUserRole()
+ return <>{role === 'admin' ? admin : user}
+}
+```
+
+## Tab Groups
+
+You can add a `layout` inside a slot to allow users to navigate the slot independently. This is useful for creating tabs.
+
+For example, the `@analytics` slot has two subpages: `/page-views` and `/visitors`.
+
+
+
+ {children}
)
}
```
```jsx filename="app/layout.js" switcher
-export default async function Layout(props) {
+import Link from 'next/link'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
- {/* ... */}
- {props.auth}
+
+
+ {children}
)
}
```
-```tsx filename="app/@auth/login/page.tsx" switcher
-import { Modal } from 'components/modal'
+### Modals
-export default function Login() {
- return (
-
- Login
- {/* ... */}
-
- )
+Parallel Routes can be used together with [Intercepting Routes](/docs/app/building-your-application/routing/intercepting-routes) to create modals. This allows you to solve common challenges when building modals, such as:
+
+- Making the modal content **shareable through a URL**.
+- **Preserving context** when the page is refreshed, instead of closing the modal.
+- **Closing the modal on backwards navigation** rather than going to the previous route.
+- **Reopening the modal on forwards navigation**.
+
+Consider the following UI pattern, where a user can open a login modal from a layout using client-side navigation, or access a separate `/login` page:
+
+
- Login
- {/* ... */}
-
- )
+export default function Page() {
+ return ` component and its children into the `/(.)login/page.tsx` file:
-```tsx filename="app/@auth/login/page.tsx" highlight="5" switcher
-'use client'
-import { useRouter } from 'next/navigation'
-import { Modal } from 'components/modal'
+```tsx filename="app/@auth/(.)login/page.tsx" switcher
+import { Modal } from '@/app/ui/modal'
+import { Login } from '@/app/ui/login'
-export default function Login() {
- const router = useRouter()
+export default function Page() {
return (
- router.back()}>Close modal
- Login
- ...
+
)
}
```
-```jsx filename="app/@auth/login/page.js" highlight="5" switcher
-'use client'
-import { useRouter } from 'next/navigation'
-import { Modal } from 'components/modal'
+```jsx filename="app/@auth/(.)login/page.js" switcher
+import { Modal } from '@/app/ui/modal'
+import { Login } from '@/app/ui/login'
-export default function Login() {
- const router = useRouter()
+export default function Page() {
return (
- router.back()}>Close modal
- Login
- ...
+
)
}
```
-> More information on modals is covered in the [Intercepting Routes](/docs/app/building-your-application/routing/intercepting-routes) section.
+> **Good to know:**
+>
+> - The convention used to intercept the route, e.g. `(.)`, depends on your file-system structure. See [Intercepting Routes convention](/docs/app/building-your-application/routing/intercepting-routes#convention).
+> - By separating the `` functionality from the modal content (``), you can ensure any content inside the modal, e.g. [forms](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms), are Server Components. See [Interleaving Client and Server Components](/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props) for more information.
-If you want to navigate elsewhere and dismiss a modal, you can also use a catch-all route.
+### Opening the modal
-
+
+ {auth}
+ {children}
+
+ )
}
```
-```jsx filename="app/@auth/[...catchAll]/page.js" switcher
-export default function CatchAll() {
- return null
+```jsx filename="app/layout.js" switcher
+import Link from 'next/link'
+
+export default function Layout({ auth, children }) {
+ return (
+ <>
+
+
+ {auth}
+ {children}
+
+ )
}
```
-> Catch-all routes take precedence over `default.js`.
+When the user clicks the ` {
+ router.back()
+ }}
+ >
+ Close modal
+
+ {children}
+
+ )
}
```
-```jsx filename="app/layout.js" switcher
-import { getUser } from '@/lib/auth'
+```tsx filename="app/ui/modal.tsx switcher
+'use client'
-export default function Layout({ dashboard, login }) {
- const isLoggedIn = getUser()
- return isLoggedIn ? dashboard : login
+import { useRouter } from 'next/navigation'
+
+export function Modal({ children }) {
+ const router = useRouter()
+
+ return (
+ <>
+ {
+ router.back()
+ }}
+ >
+ Close modal
+
+ {children}
+
+ )
}
```
- {
+function parseCacheControl(
+ str: string | null | undefined
+): Map {
const map = new Map()
if (!str) {
return map
@@ -389,7 +397,7 @@ function parseCacheControl(str: string | null): Map {
return map
}
-export function getMaxAge(str: string | null): number {
+export function getMaxAge(str: string | null | undefined): number {
const map = parseCacheControl(str)
if (map) {
let age = map.get('s-maxage') || map.get('max-age') || ''
@@ -516,77 +524,89 @@ export async function optimizeImage({
return optimizedBuffer
}
-export async function imageOptimizer(
+export async function fetchExternalImage(href: string): Promise {
+ const res = await fetch(href)
+
+ if (!res.ok) {
+ Log.error('upstream image response failed for', href, res.status)
+ throw new ImageError(
+ res.status,
+ '"url" parameter is valid but upstream response is invalid'
+ )
+ }
+
+ const buffer = Buffer.from(await res.arrayBuffer())
+ const contentType = res.headers.get('Content-Type')
+ const cacheControl = res.headers.get('Cache-Control')
+
+ return { buffer, contentType, cacheControl }
+}
+
+export async function fetchInternalImage(
+ href: string,
_req: IncomingMessage,
_res: ServerResponse,
- paramsResult: ImageParamsResult,
- nextConfig: NextConfigComplete,
- isDev: boolean | undefined,
handleRequest: (
newReq: IncomingMessage,
newRes: ServerResponse,
newParsedUrl?: NextUrlWithParsedQuery
) => Promise
-): Promise<{ buffer: Buffer; contentType: string; maxAge: number }> {
- let upstreamBuffer: Buffer
- let upstreamType: string | null | undefined
- let maxAge: number
- const { isAbsolute, href, width, mimeType, quality } = paramsResult
+): Promise {
+ try {
+ const mocked = createRequestResponseMocks({
+ url: href,
+ method: _req.method || 'GET',
+ headers: _req.headers,
+ socket: _req.socket,
+ })
- if (isAbsolute) {
- const upstreamRes = await fetch(href)
+ await handleRequest(mocked.req, mocked.res, nodeUrl.parse(href, true))
+ await mocked.res.hasStreamed
- if (!upstreamRes.ok) {
- Log.error('upstream image response failed for', href, upstreamRes.status)
+ if (!mocked.res.statusCode) {
+ Log.error('image response failed for', href, mocked.res.statusCode)
throw new ImageError(
- upstreamRes.status,
- '"url" parameter is valid but upstream response is invalid'
+ mocked.res.statusCode,
+ '"url" parameter is valid but internal response is invalid'
)
}
- upstreamBuffer = Buffer.from(await upstreamRes.arrayBuffer())
- upstreamType =
- detectContentType(upstreamBuffer) ||
- upstreamRes.headers.get('Content-Type')
- maxAge = getMaxAge(upstreamRes.headers.get('Cache-Control'))
- } else {
- try {
- const mocked = createRequestResponseMocks({
- url: href,
- method: _req.method || 'GET',
- headers: _req.headers,
- socket: _req.socket,
- })
-
- await handleRequest(mocked.req, mocked.res, nodeUrl.parse(href, true))
- await mocked.res.hasStreamed
-
- if (!mocked.res.statusCode) {
- Log.error('image response failed for', href, mocked.res.statusCode)
- throw new ImageError(
- mocked.res.statusCode,
- '"url" parameter is valid but internal response is invalid'
- )
- }
-
- upstreamBuffer = Buffer.concat(mocked.res.buffers)
- upstreamType =
- detectContentType(upstreamBuffer) ||
- mocked.res.getHeader('Content-Type')
- const cacheControl = mocked.res.getHeader('Cache-Control')
- maxAge = cacheControl ? getMaxAge(cacheControl) : 0
- } catch (err) {
- Log.error('upstream image response failed for', href, err)
- throw new ImageError(
- 500,
- '"url" parameter is valid but upstream response is invalid'
- )
- }
+ const buffer = Buffer.concat(mocked.res.buffers)
+ const contentType = mocked.res.getHeader('Content-Type')
+ const cacheControl = mocked.res.getHeader('Cache-Control')
+ return { buffer, contentType, cacheControl }
+ } catch (err) {
+ Log.error('upstream image response failed for', href, err)
+ throw new ImageError(
+ 500,
+ '"url" parameter is valid but upstream response is invalid'
+ )
}
+}
- if (upstreamType) {
- upstreamType = upstreamType.toLowerCase().trim()
+export async function imageOptimizer(
+ imageUpstream: ImageUpstream,
+ paramsResult: Pick<
+ ImageParamsResult,
+ 'href' | 'width' | 'quality' | 'mimeType'
+ >,
+ nextConfig: {
+ output: NextConfigComplete['output']
+ images: Pick<
+ NextConfigComplete['images'],
+ 'dangerouslyAllowSVG' | 'minimumCacheTTL'
+ >
+ },
+ isDev: boolean | undefined
+): Promise<{ buffer: Buffer; contentType: string; maxAge: number }> {
+ const { href, quality, width, mimeType } = paramsResult
+ const upstreamBuffer = imageUpstream.buffer
+ const maxAge = getMaxAge(imageUpstream.cacheControl)
+ const upstreamType =
+ detectContentType(upstreamBuffer) ||
+ imageUpstream.contentType?.toLowerCase().trim()
+ if (upstreamType) {
if (
upstreamType.startsWith('image/svg') &&
!nextConfig.images.dangerouslyAllowSVG
diff --git a/packages/next/src/server/next-server.ts b/packages/next/src/server/next-server.ts
index b7da975e85a56..799f3701333c0 100644
--- a/packages/next/src/server/next-server.ts
+++ b/packages/next/src/server/next-server.ts
@@ -544,53 +544,65 @@ export default class NextNodeServer extends BaseServer {
'invariant: imageOptimizer should not be called in minimal mode'
)
} else {
- const { imageOptimizer } =
+ const { imageOptimizer, fetchExternalImage, fetchInternalImage } =
require('./image-optimizer') as typeof import('./image-optimizer')
- return imageOptimizer(
- req.originalRequest,
- res.originalResponse,
- paramsResult,
- this.nextConfig,
- this.renderOpts.dev,
- async (newReq, newRes) => {
- if (newReq.url === req.url) {
- throw new Error(
- `Invariant attempted to optimize _next/image itself`
- )
- }
+ const handleInternalReq = async (
+ newReq: IncomingMessage,
+ newRes: ServerResponse
+ ) => {
+ if (newReq.url === req.url) {
+ throw new Error(`Invariant attempted to optimize _next/image itself`)
+ }
- const protocol = this.serverOptions.experimentalHttpsServer
- ? 'https'
- : 'http'
-
- const invokeRes = await invokeRequest(
- `${protocol}://${this.fetchHostname || 'localhost'}:${this.port}${
- newReq.url || ''
- }`,
- {
- method: newReq.method || 'GET',
- headers: newReq.headers,
- signal: signalFromNodeResponse(res.originalResponse),
- }
- )
- const filteredResHeaders = filterReqHeaders(
- toNodeOutgoingHttpHeaders(invokeRes.headers),
- ipcForbiddenHeaders
- )
+ const protocol = this.serverOptions.experimentalHttpsServer
+ ? 'https'
+ : 'http'
- for (const key of Object.keys(filteredResHeaders)) {
- newRes.setHeader(key, filteredResHeaders[key] || '')
+ const invokeRes = await invokeRequest(
+ `${protocol}://${this.fetchHostname || 'localhost'}:${this.port}${
+ newReq.url || ''
+ }`,
+ {
+ method: newReq.method || 'GET',
+ headers: newReq.headers,
+ signal: signalFromNodeResponse(res.originalResponse),
}
- newRes.statusCode = invokeRes.status || 200
+ )
+ const filteredResHeaders = filterReqHeaders(
+ toNodeOutgoingHttpHeaders(invokeRes.headers),
+ ipcForbiddenHeaders
+ )
- if (invokeRes.body) {
- await pipeToNodeResponse(invokeRes.body, newRes)
- } else {
- res.send()
- }
- return
+ for (const key of Object.keys(filteredResHeaders)) {
+ newRes.setHeader(key, filteredResHeaders[key] || '')
}
+ newRes.statusCode = invokeRes.status || 200
+
+ if (invokeRes.body) {
+ await pipeToNodeResponse(invokeRes.body, newRes)
+ } else {
+ res.send()
+ }
+ return
+ }
+
+ const { isAbsolute, href } = paramsResult
+
+ const imageUpstream = isAbsolute
+ ? await fetchExternalImage(href)
+ : await fetchInternalImage(
+ href,
+ req.originalRequest,
+ res.originalResponse,
+ handleInternalReq
+ )
+
+ return imageOptimizer(
+ imageUpstream,
+ paramsResult,
+ this.nextConfig,
+ this.renderOpts.dev
)
}
}
diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
index da12ec39d3a57..931630cb91ba0 100644
--- a/packages/react-dev-overlay/package.json
+++ b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/react-dev-overlay",
- "version": "14.1.1-canary.13",
+ "version": "14.1.1-canary.14",
"description": "A development-only overlay for developing React applications.",
"repository": {
"url": "vercel/next.js",
diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
index 811ff2d0482fa..31f1198747527 100644
--- a/packages/react-refresh-utils/package.json
+++ b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/react-refresh-utils",
- "version": "14.1.1-canary.13",
+ "version": "14.1.1-canary.14",
"description": "An experimental package providing utilities for React Refresh.",
"repository": {
"url": "vercel/next.js",
diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
index 8027e36695c6f..62aee3976111f 100644
--- a/packages/third-parties/package.json
+++ b/packages/third-parties/package.json
@@ -1,6 +1,6 @@
{
"name": "@next/third-parties",
- "version": "14.1.1-canary.13",
+ "version": "14.1.1-canary.14",
"repository": {
"url": "vercel/next.js",
"directory": "packages/third-parties"
@@ -26,7 +26,7 @@
"third-party-capital": "1.0.20"
},
"devDependencies": {
- "next": "14.1.1-canary.13",
+ "next": "14.1.1-canary.14",
"outdent": "0.8.0",
"prettier": "2.5.1"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3db682ecd27e6..e92dc01f4c9df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -747,7 +747,7 @@ importers:
packages/eslint-config-next:
dependencies:
'@next/eslint-plugin-next':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../eslint-plugin-next
'@rushstack/eslint-patch':
specifier: ^1.3.3
@@ -809,7 +809,7 @@ importers:
packages/next:
dependencies:
'@next/env':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../next-env
'@swc/helpers':
specifier: 0.5.2
@@ -933,19 +933,19 @@ importers:
specifier: 1.1.0
version: 1.1.0
'@next/polyfill-module':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../next-polyfill-module
'@next/polyfill-nomodule':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../next-polyfill-nomodule
'@next/react-dev-overlay':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../react-dev-overlay
'@next/react-refresh-utils':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../react-refresh-utils
'@next/swc':
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../next-swc
'@opentelemetry/api':
specifier: 1.6.0
@@ -1569,7 +1569,7 @@ importers:
version: 1.0.20
devDependencies:
next:
- specifier: 14.1.1-canary.13
+ specifier: 14.1.1-canary.14
version: link:../next
outdent:
specifier: 0.8.0
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/layout.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/layout.tsx
new file mode 100644
index 0000000000000..621aea648e1a0
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/layout.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ Root Layout
+ {children}
+
+
+ )
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/default.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/default.tsx
new file mode 100644
index 0000000000000..ceaa4105ad9e0
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+ return '@bar default'
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/layout.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/layout.tsx
new file mode 100644
index 0000000000000..2e09ca74cc17d
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/layout.tsx
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+ return (
+
+
@bar Layout
+
{children}
+
Bar Slot
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/subroute/page.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/subroute/page.tsx
new file mode 100644
index 0000000000000..83be0d5a350c7
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@bar/subroute/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return Subroute
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/default.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/default.tsx
new file mode 100644
index 0000000000000..9b071d1c39e10
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+ return '@foo default'
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/layout.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/layout.tsx
new file mode 100644
index 0000000000000..ab0a56dffff47
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/@foo/layout.tsx
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+ return (
+
+
@foo Layout
+
{children}
+
Foo Slot
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/default.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/default.tsx
new file mode 100644
index 0000000000000..0d8777ed565be
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/default.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return 'default page'
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/nested/layout.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/nested/layout.tsx
new file mode 100644
index 0000000000000..467f9ca246a53
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/nested/layout.tsx
@@ -0,0 +1,10 @@
+export default function Layout({ children, bar, foo }) {
+ return (
+
+
Nested Layout
+
{children}
+
{foo}
+
{bar}
+
Hello from Nested
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/app/page.tsx b/test/e2e/app-dir/parallel-routes-layouts/app/page.tsx
new file mode 100644
index 0000000000000..c9f9a60006193
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/app/page.tsx
@@ -0,0 +1,3 @@
+export default async function Home() {
+ return Hello World
+}
diff --git a/test/e2e/app-dir/parallel-routes-layouts/next.config.js b/test/e2e/app-dir/parallel-routes-layouts/next.config.js
new file mode 100644
index 0000000000000..807126e4cf0bf
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/parallel-routes-layouts/parallel-routes-layouts.test.ts b/test/e2e/app-dir/parallel-routes-layouts/parallel-routes-layouts.test.ts
new file mode 100644
index 0000000000000..431c5aaf9ce6f
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-layouts/parallel-routes-layouts.test.ts
@@ -0,0 +1,78 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+describe('parallel-routes-layouts', () => {
+ const { next } = nextTestSetup({
+ files: __dirname,
+ })
+
+ it('should properly render layouts for multiple slots', async () => {
+ const browser = await next.browser('/nested')
+
+ let layouts = await getLayoutHeadings(browser)
+ expect(layouts).toHaveLength(4)
+ expect(layouts).toEqual(
+ expect.arrayContaining([
+ 'Root Layout',
+ 'Nested Layout',
+ '@foo Layout',
+ '@bar Layout',
+ ])
+ )
+
+ // ensure nested/page is showing its contents
+ expect(await browser.elementById('nested-children').text()).toBe(
+ 'Hello from Nested'
+ )
+
+ // Ensure each slot is showing its contents
+ expect(await browser.elementById('foo-children').text()).toBe('Foo Slot')
+ expect(await browser.elementById('bar-children').text()).toBe('Bar Slot')
+
+ // Navigate to a subroute that only has a match for the @foo slot
+ await browser.elementByCss('[href="/nested/subroute"]').click()
+ await retry(async () => {
+ // the bar slot has a match for the subroute, so we expect it to be rendered
+ expect(await browser.elementById('bar-children').text()).toBe('Subroute')
+
+ // We still expect the previous active slots to be visible until reload even if they don't match
+ layouts = await getLayoutHeadings(browser)
+ expect(layouts).toEqual(
+ expect.arrayContaining([
+ 'Root Layout',
+ 'Nested Layout',
+ '@foo Layout',
+ '@bar Layout',
+ ])
+ )
+
+ expect(await browser.elementById('foo-children').text()).toBe('Foo Slot')
+
+ expect(await browser.elementById('nested-children').text()).toBe(
+ 'Hello from Nested'
+ )
+ })
+
+ // Trigger a reload, which will clear the previous active slots and show the ones that explicitly have matched
+ await browser.refresh()
+
+ layouts = await getLayoutHeadings(browser)
+
+ // the foo slot does not match on the subroute, so we don't expect the layout or page to be rendered
+ expect(layouts).toHaveLength(3)
+ expect(layouts).toEqual(
+ expect.arrayContaining(['Root Layout', 'Nested Layout', '@bar Layout'])
+ )
+
+ // we should now see defaults being rendered for both the page & foo slots
+ expect(await browser.elementById('nested-children').text()).toBe(
+ 'default page'
+ )
+ expect(await browser.elementById('foo-slot').text()).toBe('@foo default')
+ })
+})
+
+async function getLayoutHeadings(browser): Promise {
+ const elements = await browser.elementsByCss('h1')
+ return Promise.all(elements.map(async (el) => await el.innerText()))
+}
diff --git a/test/integration/next-image-new/asset-prefix/test/index.test.js b/test/integration/next-image-new/asset-prefix/test/index.test.js
index 578e2227e2a07..8906ce83cc400 100644
--- a/test/integration/next-image-new/asset-prefix/test/index.test.js
+++ b/test/integration/next-image-new/asset-prefix/test/index.test.js
@@ -38,9 +38,13 @@ describe('Image Component assetPrefix Tests', () => {
const bgImage = await browser.eval(
`document.getElementById('${id}').style['background-image']`
)
- expect(bgImage).toMatch(
- /\/_next\/image\?url=https%3A%2F%2Fexample\.vercel\.sh%2Fpre%2F_next%2Fstatic%2Fmedia%2Ftest(.+).jpg&w=8&q=70/
- )
+ if (process.env.TURBOPACK) {
+ expect(bgImage).toContain('data:image/svg+xml;')
+ } else {
+ expect(bgImage).toMatch(
+ /\/_next\/image\?url=https%3A%2F%2Fexample\.vercel\.sh%2Fpre%2F_next%2Fstatic%2Fmedia%2Ftest(.+).jpg&w=8&q=70/
+ )
+ }
})
it('should not log a deprecation warning about using `images.domains`', async () => {