Docs: Next.js 15 updates

docs/02-app/01-building-your-application/03-rendering/01-partial-prerendering.mdx

@@ -0,0 +1,90 @@
+---
+title: Partial Prerendering (Experimental)
+description: Learn how to combine the benefits of static and dynamic rendering with Partial Prerendering.
+---
+
+> Partial Prerendering is an **experimental** feature and subject to change.
+
+Partial Prerendering (PPR) is a rendering strategy that combines the benefits of static and dynamic rendering on the same route.
+
+Next.js currently defaults to static rendering unless you use [dynamic functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions). These APIs opt a whole route into dynamic rendering.
+
+With PPR, you can wrap any dynamic UI in a [Suspense](https://react.dev/reference/react/Suspense) boundary. When a new request comes in, Next.js will immediately serve a static HTML shell from the cache, then render and [stream](/docs/app/building-your-application/rendering/server-components#streaming) the dynamic parts in the same HTTP request.
+
+<Image
+  alt="Partially Prerendered Product Page showing static nav and product information, and dynamic cart and recommended products"
+  srcLight="/learn/light/thinking-in-ppr.png"
+  srcDark="/learn/dark/thinking-in-ppr.png"
+  width="1600"
+  height="632"
+/>
+
+## Incremental Adoption (Version 15)
+
+In Next.js 15, you can incrementally adopt Partial Prerendering in [layouts](/docs/app/building-your-application/routing/layouts-and-templates) and [pages](/docs/app/building-your-application/routing/pages) by setting the [`ppr`](/docs/app/api-reference/next-config-js/ppr) `next.config.js` option to `incremental`, and adding the `experimental_ppr` [route config option](/docs/app/api-reference/file-conventions/route-segment-config) at the top of the file:
+
+```js filename="next.config.js"
+const nextConfig = {
+  experimental: {
+    ppr: 'incremental',
+  },
+}
+
+module.exports = nextConfig
+```
+
+```tsx filename="app/page.tsx" switcher
+import { Suspense } from "react"
+import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"
+
+export const experimental_ppr = true
+
+export default function Page() {
+  return {
+     <>
+      <StaticComponent />
+        <Suspense fallback={<Fallback />}>
+          <DynamicComponent />
+        </Suspense>
+     </>
+  };
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { Suspense } from "react"
+import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"
+
+export const experimental_ppr = true
+
+export default function Page() {
+  return {
+     <>
+      <StaticComponent />
+        <Suspense fallback={<Fallback />}>
+          <DynamicComponent />
+        </Suspense>
+     </>
+  };
+}
+```
+
+> **Good to know**:
+>
+> - Routes that don't have `experimental_ppr` will default to `false` and will not be prerendered using PPR. You need to explicitly opt-in to PPR for each route.
+> - `experimental_ppr` will apply to all children of the route segment, including nested layouts and pages. You don't have to add it to every file, only the top segment of a route.
+> - To disable PPR for children segments, you can set `experimental_ppr` to `false` in the child segment.
+
+## Enabling PPR (Version 14)
+
+For version 14, you can enable it by adding the [`ppr`](/docs/app/api-reference/next-config-js/ppr) option to your `next.config.js` file. This will apply to all routes in your application:
+
+```js filename="next.config.js"
+const nextConfig = {
+  experimental: {
+    ppr: true,
+  },
+}
+
+module.exports = nextConfig
+```

docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx → docs/02-app/01-building-your-application/03-rendering/02-server-components.mdx

@@ -101,10 +101,13 @@ As a developer, you do not need to choose between static and dynamic rendering a
 
 #### Dynamic Functions
 
-Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic functions are:
+Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic APIs are:
 
-- **[`cookies()`](/docs/app/api-reference/functions/cookies) and [`headers()`](/docs/app/api-reference/functions/headers)**: Using these in a Server Component will opt the whole route into dynamic rendering at request time.
-- **[`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional)**: Using the `searchParams` prop on a [Page](/docs/app/api-reference/file-conventions/page) will opt the page into dynamic rendering at request time.
+- [`cookies()`](/docs/app/api-reference/functions/cookies)
+- [`headers()`](/docs/app/api-reference/functions/headers)
+- [`unstable_noStore()`](/docs/app/api-reference/functions/unstable_noStore)
+- [`unstable_after()`](/docs/app/api-reference/functions/unstable_after):
+- [`searchParams` prop](/docs/app/api-reference/file-conventions/page#searchparams-optional)
 
 Using any of these functions will opt the whole route into dynamic rendering at request time.
 

docs/02-app/01-building-your-application/06-optimizing/06-package-bundling.mdx

@@ -0,0 +1,135 @@
+---
+title: Optimizing Package Bundling
+nav_title: Package Bundling
+description: Learn how to optimize your application's server and client bundles.
+related:
+  description: Learn more about optimizing your application for production.
+  links:
+    - app/building-your-application/deploying/production-checklist
+---
+
+Bundling external packages can significantly improve the performance of your application. <AppOnly>By default, packages imported inside Server Components and Route Handlers are automatically bundled by Next.js. This page will guide you through how to analyze and further optimize package bundling</AppOnly>. <PagesOnly>By default, packages imported into your application are not bundled. This can impact performance or might not work if external packages are not pre-bundled, for example, if imported from a monorepo or `node_modules`. This page will guide you through how to analyze and configure package bundling.</PagesOnly>
+
+## Analyzing JavaScript bundles
+
+[`@next/bundle-analyzer`](https://www.npmjs.com/package/@next/bundle-analyzer) is a plugin for Next.js that helps you manage the size of your application bundles. It generates a visual report of the size of each package and their dependencies. You can use the information to remove large dependencies, split, or [lazy-load](/docs/app/building-your-application/optimizing/lazy-loading) your code.
+
+### Installation
+
+Install the plugin by running the following command:
+
+```bash
+npm i @next/bundle-analyzer
+# or
+yarn add @next/bundle-analyzer
+# or
+pnpm add @next/bundle-analyzer
+```
+
+Then, add the bundle analyzer's settings to your `next.config.js`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+const withBundleAnalyzer = require('@next/bundle-analyzer')()
+
+module.exports =
+  process.env.ANALYZE === 'true' ? withBundleAnalyzer(nextConfig) : nextConfig
+```
+
+### Generating a report
+
+Run the following command to analyze your bundles:
+
+```bash
+ANALYZE=true npm run build
+# or
+ANALYZE=true yarn build
+# or
+ANALYZE=true pnpm build
+```
+
+The report will open three new tabs in your browser, which you can inspect. Periodically evaluating your application's bundles can help you maintain application performance over time.
+
+## Optimizing package imports
+
+Some packages, such as icon libraries, can export hundreds of modules, which can cause performance issues in development and production.
+
+You can optimize how these packages are imported by adding the [`optimizePackageImports`](/docs/app/api-reference/next-config-js/optimizePackageImports) option to your `next.config.js`. This option will only load the modules you _actually_ use, while still giving you the convenience of writing import statements with many named exports.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['icon-library'],
+  },
+}
+
+module.exports = nextConfig
+```
+
+Next.js also optimizes some libraries automatically. See the [full list](https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports)
+
+<PagesOnly>
+
+## Bundling specific packages
+
+To bundle specific packages, you can use the [`transpilePackages`](/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js`. This option is useful for bundling external packages that are not pre-bundled, for example, in a monorepo or imported from `node_modules`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['package-name'],
+}
+
+module.exports = nextConfig
+```
+
+## Bundling all packages
+
+To automatically bundle all packages (default behavior in the App Router), you can use the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) option in your `next.config.js`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  bundlePagesRouterDependencies: true,
+}
+
+module.exports = nextConfig
+```
+
+## Opting specific packages out of bundling
+
+If you have the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) option enabled, you can opt specific packages out of automatic bundling using the [`serverExternalPackages`](/docs/pages/api-reference/next-config-js/serverExternalPackages) option in your `next.config.js`:
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Automatically bundle external packages in the Pages Router:
+  bundlePagesRouterDependencies: true,
+  // Opt specific packages out of bundling for both App and Pages Router:
+  serverExternalPackages: ['package-name'],
+}
+
+module.exports = nextConfig
+```
+
+</PagesOnly>
+
+<AppOnly>
+
+## Opting specific packages out of bundling
+
+Since packages imported inside Server Components and Route Handlers are automatically bundled by Next.js, you can opt specific packages out of bundling using the [`serverExternalPackages`](/docs/app/api-reference/next-config-js/serverExternalPackages) option in your `next.config.js`.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  serverExternalPackages: ['package-name'],
+}
+
+module.exports = nextConfig
+```
+
+</AppOnly>

docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx

@@ -5,12 +5,9 @@ description: Optimize the performance of third-party libraries in your applicati
 
 {/* 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. */}
 
-**`@next/third-parties`** is a library that provides a collection of components and utilities that
-improve the performance and developer experience of loading popular third-party libraries in your
-Next.js application.
+**`@next/third-parties`** is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries in your Next.js application.
 
-All third-party integrations provided by `@next/third-parties` have been optimized for performance
-and ease of use.
+All third-party integrations provided by `@next/third-parties` have been optimized for performance and ease of use.
 
 ## Getting Started
 
@@ -30,14 +27,11 @@ All supported third-party libraries from Google can be imported from `@next/thir
 
 ### Google Tag Manager
 
-The `GoogleTagManager` component can be used to instantiate a [Google Tag
-Manager](https://developers.google.com/tag-platform/tag-manager) container to your
-page. By default, it fetches the original inline script after hydration occurs on the page.
+The `GoogleTagManager` component can be used to instantiate a [Google Tag Manager](https://developers.google.com/tag-platform/tag-manager) container to your page. By default, it fetches the original inline script after hydration occurs on the page.
 
 <AppOnly>
 
-To load Google Tag Manager for all routes, include the component directly in your root layout and
-pass in your GTM container ID:
+To load Google Tag Manager for all routes, include the component directly in your root layout and pass in your GTM container ID:
 
 ```tsx filename="app/layout.tsx" switcher
 import { GoogleTagManager } from '@next/third-parties/google'

docs/02-app/01-building-your-application/06-optimizing/13-memory-usage.mdx

@@ -11,7 +11,7 @@ Let's explore some strategies and techniques to optimize memory and address comm
 
 Applications with a large amount of dependencies will use more memory.
 
-The [Bundle Analyzer](/docs/app/building-your-application/optimizing/bundle-analyzer) can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage.
+The [Bundle Analyzer](/docs/app/building-your-application/optimizing/package-bundling#analyzing-javascript-bundles) can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage.
 
 ## Run `next build` with `--experimental-debug-memory-usage`
 

docs/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx

@@ -139,7 +139,7 @@ Before going to production, you can run `next build` to build your application l
 
 ### Analyzing bundles
 
-Use the [`@next/bundle-analyzer` plugin](/docs/app/building-your-application/optimizing/bundle-analyzer) to analyze the size of your JavaScript bundles and identify large modules and dependencies that might be impacting your application's performance.
+Use the [`@next/bundle-analyzer` plugin](/docs/app/building-your-application/optimizing/package-bundling#analyzing-javascript-bundles) to analyze the size of your JavaScript bundles and identify large modules and dependencies that might be impacting your application's performance.
 
 Additionally, the following tools can you understand the impact of adding new dependencies to your application:
 

docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx

@@ -7,6 +7,7 @@ The Route Segment options allows you to configure the behavior of a [Page](/docs
 
 | Option                                | Type                                                                                                                      | Default                    |
 | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| [`experimental_ppr`](#dynamic)        | `'true' \| 'false'`                                                                                                       |
 | [`dynamic`](#dynamic)                 | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`                                                                  | `'auto'`                   |
 | [`dynamicParams`](#dynamicparams)     | `boolean`                                                                                                                 | `true`                     |
 | [`revalidate`](#revalidate)           | `false \| 0 \| number`                                                                                                    | `false`                    |
@@ -17,6 +18,20 @@ The Route Segment options allows you to configure the behavior of a [Page](/docs
 
 ## Options
 
+### `experimental_ppr`
+
+Enable [Partial Prerendering (PPR)](/docs/app/building-your-application/rendering/partial-prerendering) for a layout or page.
+
+```tsx filename="layout.tsx | page.tsx " switcher
+export const experimental_ppr = 'true'
+// 'true' | 'false'
+```
+
+```jsx filename="layout.js | page.js " switcher
+export const experimental_ppr = 'true'
+// 'true' | 'false'
+```
+
 ### `dynamic`
 
 Change the dynamic behavior of a layout or page to fully static or fully dynamic.

docs/02-app/02-api-reference/04-functions/generate-metadata.mdx

@@ -1,6 +1,5 @@
 ---
-title: Metadata Object and generateMetadata Options
-nav_title: generateMetadata
+title: generateMetadata
 description: Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.
 related:
   title: Next Steps

docs/02-app/02-api-reference/04-functions/permanentRedirect.mdx

@@ -33,7 +33,7 @@ The `type` parameter has no effect when used in Server Components.
 
 ## Returns
 
-`permanentRedirect` does not return any value.
+`permanentRedirect` does not return a value.
 
 ## Example
 

docs/02-app/02-api-reference/04-functions/redirect.mdx

@@ -36,7 +36,7 @@ The `type` parameter has no effect when used in Server Components.
 
 ## Returns
 
-`redirect` does not return any value.
+`redirect` does not return a value.
 
 ## Example