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 exporting 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`