Merge branch 'canary' into eslint-plugin-next

docs/02-app/02-api-reference/04-functions/use-search-params.mdx

@@ -258,7 +258,7 @@ To access search params in [Pages](/docs/app/api-reference/file-conventions/page
 
 Unlike Pages, [Layouts](/docs/app/api-reference/file-conventions/layout) (Server Components) **do not** receive the `searchParams` prop. This is because a shared layout is [not re-rendered during navigation](/docs/app/building-your-application/routing#partial-rendering) which could lead to stale `searchParams` between navigations. View [detailed explanation](/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams).
 
-Instead, use the Page [`searchParams`](/docs/app/api-reference/file-conventions/page) prop or the [`useSearchParams`](/docs/app/api-reference/functions/use-params) hook in a Client Component, which is re-rendered on the client with the latest `searchParams`.
+Instead, use the Page [`searchParams`](/docs/app/api-reference/file-conventions/page) prop or the [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) hook in a Client Component, which is re-rendered on the client with the latest `searchParams`.
 
 ## Examples
 

docs/02-app/02-api-reference/06-create-next-app.mdx

@@ -5,17 +5,23 @@ description: Create Next.js apps in one command with create-next-app.
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
 
-The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
+The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you.
+
+You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples).
 
 ### Interactive
 
 You can create a new project interactively by running:
 
 ```bash filename="Terminal"
 npx create-next-app@latest
+```
 
+```bash filename="Terminal"
 yarn create next-app
+```
 
+```bash filename="Terminal"
 pnpm create next-app
 ```
 
@@ -89,7 +95,7 @@ Options:
   -e, --example [name]|[github-url]
 
     An example to bootstrap the app with. You can use an example name
-    from the official Next.js repo or a GitHub URL. The URL can use
+    from the official Next.js repo or a public GitHub URL. The URL can use
     any branch and/or subdirectory
 
   --example-path <path-to-example>
@@ -113,5 +119,5 @@ Options:
 - **Interactive Experience**: Running `npx create-next-app@latest` (with no arguments) launches an interactive experience that guides you through setting up a project.
 - **Zero Dependencies**: Initializing a project is as quick as one second. Create Next App has zero dependencies.
 - **Offline Support**: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
-- **Support for Examples**: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. `npx create-next-app --example api-routes`).
+- **Support for Examples**: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. `npx create-next-app --example api-routes`) or any public GitHub repository.
 - **Tested**: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.

packages/next/src/lib/metadata/resolvers/resolve-url.ts

@@ -33,7 +33,7 @@ export function getSocialImageFallbackMetadataBase(
 
   if (isMetadataBaseMissing) {
     Log.warnOnce(
-      `\nmetadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to "${fallbackMetadata.origin}". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase`
+      `\nmetadata.metadataBase is not set for resolving social open graph or twitter images, using "${fallbackMetadata.origin}". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase`
     )
   }
 

packages/next/src/server/app-render/app-render.tsx

@@ -56,7 +56,10 @@ import { interopDefault } from './interop-default'
 import { preloadComponent } from './preload-component'
 import { FlightRenderResult } from './flight-render-result'
 import { createErrorHandler } from './create-error-handler'
-import { getShortDynamicParamType } from './get-short-dynamic-param-type'
+import {
+  getShortDynamicParamType,
+  dynamicParamTypes,
+} from './get-short-dynamic-param-type'
 import { getSegmentParam } from './get-segment-param'
 import { getCssInlinedLinkTags } from './get-css-inlined-link-tags'
 import { getPreloadableFonts } from './get-preloadable-fonts'
@@ -324,7 +327,7 @@ export async function renderToHTMLOrFlight(
       if (!value) {
         // Handle case where optional catchall does not have a value, e.g. `/dashboard/[...slug]` when requesting `/dashboard`
         if (segmentParam.type === 'optional-catchall') {
-          const type = getShortDynamicParamType(segmentParam.type)
+          const type = dynamicParamTypes[segmentParam.type]
           return {
             param: key,
             value: null,

packages/next/src/server/app-render/get-short-dynamic-param-type.tsx

@@ -1,19 +1,23 @@
 import { DynamicParamTypes, DynamicParamTypesShort } from './types'
 
+export const dynamicParamTypes: Record<
+  DynamicParamTypes,
+  DynamicParamTypesShort
+> = {
+  catchall: 'c',
+  'optional-catchall': 'oc',
+  dynamic: 'd',
+}
+
 /**
  * Shorten the dynamic param in order to make it smaller when transmitted to the browser.
  */
 export function getShortDynamicParamType(
   type: DynamicParamTypes
 ): DynamicParamTypesShort {
-  switch (type) {
-    case 'catchall':
-      return 'c'
-    case 'optional-catchall':
-      return 'oc'
-    case 'dynamic':
-      return 'd'
-    default:
-      throw new Error('Unknown dynamic param type')
+  const short = dynamicParamTypes[type]
+  if (!short) {
+    throw new Error('Unknown dynamic param type')
   }
+  return short
 }

packages/next/src/server/dev/on-demand-entry-handler.ts

@@ -98,9 +98,9 @@ export function getEntryKey(
   pageBundleType: 'app' | 'pages' | 'root',
   page: string
 ) {
-  // TODO: handle the /@children slot better
-  // this is a quick hack to handle when children is provided as @children/page instead of /page
-  return `${compilerType}@${pageBundleType}@${page.replace(/\/@children/g, '')}`
+  // TODO: handle the /children slot better
+  // this is a quick hack to handle when children is provided as children/page instead of /page
+  return `${compilerType}@${pageBundleType}@${page.replace(/\/children/g, '')}`
 }
 
 function getPageBundleType(pageBundlePath: string) {

test/e2e/app-dir/metadata-missing-metadata-base/index.test.ts

@@ -24,7 +24,7 @@ describe('app dir - metadata missing metadataBase', () => {
     await next.start()
     await fetchViaHTTP(next.url, '/')
     expect(next.cliOutput).toInclude(
-      'metadata.metadataBase is not set for resolving social open graph or twitter images, fallbacks to'
+      'metadata.metadataBase is not set for resolving social open graph or twitter images, using'
     )
     expect(next.cliOutput).toInclude(`"http://localhost:${port}`)
     expect(next.cliOutput).toInclude(

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-nested/home/@parallelB/nested/page.tsx

@@ -0,0 +1,8 @@
+export default function ParallelPage() {
+  return (
+    <>
+      <p>Hello from nested parallel page!</p>
+      <div id="timestamp">{Date.now()}</div>
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-nested/home/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ parallelB }: { parallelB: React.ReactNode }) {
+  return (
+    <main>
+      <h3>{`(parallelB)`}</h3>
+      <div>{parallelB}</div>
+    </main>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-nested/layout.tsx

@@ -0,0 +1,10 @@
+export default function Parallel({ children }) {
+  return (
+    <div>
+      parallel/layout:
+      <div className="parallel" title="children">
+        {children}
+      </div>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts

@@ -354,6 +354,21 @@ createNextDescribe(
             return newTimestamp !== timestamp ? 'failure' : 'success'
           }, 'success')
         })
+
+        it('should support nested parallel routes', async () => {
+          const browser = await next.browser('parallel-nested/home/nested')
+          const timestamp = await browser.elementByCss('#timestamp').text()
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 3000)
+          })
+
+          await check(async () => {
+            // an invalid response triggers a fast refresh, so if the timestamp doesn't update, this behaved correctly
+            const newTimestamp = await browser.elementByCss('#timestamp').text()
+            return newTimestamp !== timestamp ? 'failure' : 'success'
+          }, 'success')
+        })
       }
     })