vercel · delbaoliveira · May 21, 2025 · May 21, 2025 · May 21, 2025 · May 21, 2025
diff --git a/docs/01-app/02-guides/css-in-js.mdx b/docs/01-app/02-guides/css-in-js.mdx
@@ -92,7 +92,7 @@ export default function StyledJsxRegistry({ children }) {
 }
 ```
 
-Then, wrap your [root layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) with the registry:
+Then, wrap your [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) with the registry:
 
 ```tsx filename="app/layout.tsx" switcher
 import StyledJsxRegistry from './registry'

diff --git a/docs/01-app/02-guides/mdx.mdx b/docs/01-app/02-guides/mdx.mdx
@@ -483,7 +483,7 @@ export default function Page() {
 
 <AppOnly>
 
-To share a layout across MDX pages, you can use the [built-in layouts support](/docs/app/building-your-application/routing/layouts-and-templates#layouts) with the App Router.
+To share a layout across MDX pages, you can use the [built-in layouts support](/docs/app/getting-started/layouts-and-pages#creating-a-layout) with the App Router.
 
 ```tsx filename="app/mdx-page/layout.tsx" switcher
 export default function MdxLayout({ children }: { children: React.ReactNode }) {

diff --git a/docs/01-app/02-guides/migrating/app-router-migration.mdx b/docs/01-app/02-guides/migrating/app-router-migration.mdx
@@ -112,7 +112,7 @@ We recommend reducing the combined complexity of these updates by breaking down
   - `.js`, `.jsx`, or `.tsx` file extensions can be used for special files.
 - You can colocate other files inside the `app` directory such as components, styles, tests, and more. [Learn more](/docs/app/building-your-application/routing).
 - Data fetching functions like `getServerSideProps` and `getStaticProps` have been replaced with [a new API](/docs/app/building-your-application/data-fetching) inside `app`. `getStaticPaths` has been replaced with [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
-- `pages/_app.js` and `pages/_document.js` have been replaced with a single `app/layout.js` root layout. [Learn more](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required).
+- `pages/_app.js` and `pages/_document.js` have been replaced with a single `app/layout.js` root layout. [Learn more](/docs/app/api-reference/file-conventions/layout#root-layouts).
 - `pages/_error.js` has been replaced with more granular `error.js` special files. [Learn more](/docs/app/building-your-application/routing/error-handling).
 - `pages/404.js` has been replaced with the [`not-found.js`](/docs/app/api-reference/file-conventions/not-found) file.
 - `pages/api/*` API Routes have been replaced with the [`route.js`](/docs/app/api-reference/file-conventions/route) (Route Handler) special file.
@@ -129,7 +129,7 @@ Then, create a new `app` directory at the root of your project (or `src/` direct
 
 ### Step 2: Creating a Root Layout
 
-Create a new `app/layout.tsx` file inside the `app` directory. This is a [root layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) that will apply to all routes inside `app`.
+Create a new `app/layout.tsx` file inside the `app` directory. This is a [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) that will apply to all routes inside `app`.
 
 ```tsx filename="app/layout.tsx" switcher
 export default function RootLayout({
@@ -192,7 +192,7 @@ If you are using any React Context providers, they will need to be moved to a [C
 
 #### Migrating the `getLayout()` pattern to Layouts (Optional)
 
-Next.js recommended adding a [property to Page components](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts) to achieve per-page layouts in the `pages` directory. This pattern can be replaced with native support for [nested layouts](/docs/app/building-your-application/routing/layouts-and-templates#layouts) in the `app` directory.
+Next.js recommended adding a [property to Page components](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts) to achieve per-page layouts in the `pages` directory. This pattern can be replaced with native support for [nested layouts](/docs/app/getting-started/layouts-and-pages#creating-a-layout) in the `app` directory.
 
 <details>
   <summary>See before and after example</summary>

diff --git a/docs/01-app/02-guides/migrating/from-create-react-app.mdx b/docs/01-app/02-guides/migrating/from-create-react-app.mdx
@@ -78,7 +78,7 @@ export default nextConfig
 
 ### Step 3: Create the Root Layout
 
-A Next.js [App Router](/docs/app) application must include a [root layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file, which is a [React Server Component](/docs/app/getting-started/server-and-client-components) that will wrap all your pages.
+A Next.js [App Router](/docs/app) application must include a [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) file, which is a [React Server Component](/docs/app/getting-started/server-and-client-components) that will wrap all your pages.
 
 The closest equivalent of the root layout file in a CRA application is `public/index.html`, which includes your `<html>`, `<head>`, and `<body>` tags.
 

diff --git a/docs/01-app/02-guides/migrating/from-vite.mdx b/docs/01-app/02-guides/migrating/from-vite.mdx
@@ -129,7 +129,7 @@ You can find more information about configuring TypeScript on the
 ### Step 4: Create the Root Layout
 
 A Next.js [App Router](/docs/app) application must include a
-[root layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)
+[root layout](/docs/app/api-reference/file-conventions/layout#root-layouts)
 file, which is a [React Server Component](/docs/app/getting-started/server-and-client-components)
 that will wrap all pages in your application. This file is defined at the top level of the `app`
 directory.

diff --git a/docs/01-app/02-guides/production-checklist.mdx b/docs/01-app/02-guides/production-checklist.mdx
@@ -40,11 +40,11 @@ While building your application, we recommend using the following features to en
 
 <AppOnly>
 
-- **[Layouts](/docs/app/building-your-application/routing/layouts-and-templates#layouts):** Use layouts to share UI across pages and enable [partial rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) on navigation.
+- **[Layouts](/docs/app/getting-started/layouts-and-pages#creating-a-layout):** Use layouts to share UI across pages and enable [partial rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) on navigation.
 - **[`<Link>` component](/docs/app/building-your-application/routing/linking-and-navigating#link-component):** Use the `<Link>` component for [client-side navigation and prefetching](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works).
 - **[Error Handling](/docs/app/building-your-application/routing/error-handling):** Gracefully handle [catch-all errors](/docs/app/building-your-application/routing/error-handling) and [404 errors](/docs/app/api-reference/file-conventions/not-found) in production by creating custom error pages.
 - **[Client and Server Components](/docs/app/getting-started/server-and-client-components#examples):** Follow the recommended composition patterns for Server and Client Components, and check the placement of your [`"use client"` boundaries](/docs/app/getting-started/server-and-client-components#examples#moving-client-components-down-the-tree) to avoid unnecessarily increasing your client-side JavaScript bundle.
-- **[Dynamic APIs](/docs/app/getting-started/partial-prerendering#dynamic-rendering):** Be aware that Dynamic APIs like [`cookies`](/docs/app/api-reference/functions/cookies) and the [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop will opt the entire route into [Dynamic Rendering](/docs/app/getting-started/partial-prerendering#dynamic-rendering) (or your whole application if used in the [Root Layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)). Ensure Dynamic API usage is intentional and wrap them in `<Suspense>` boundaries where appropriate.
+- **[Dynamic APIs](/docs/app/getting-started/partial-prerendering#dynamic-rendering):** Be aware that Dynamic APIs like [`cookies`](/docs/app/api-reference/functions/cookies) and the [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop will opt the entire route into [Dynamic Rendering](/docs/app/getting-started/partial-prerendering#dynamic-rendering) (or your whole application if used in the [Root Layout](/docs/app/api-reference/file-conventions/layout#root-layouts)). Ensure Dynamic API usage is intentional and wrap them in `<Suspense>` boundaries where appropriate.
 
 > **Good to know**: [Partial Prerendering (experimental)](/blog/next-14#partial-prerendering-preview) will allow parts of a route to be dynamic without opting the whole route into dynamic rendering.
 

diff --git a/docs/01-app/02-guides/self-hosting.mdx b/docs/01-app/02-guides/self-hosting.mdx
@@ -28,7 +28,7 @@ Image Optimization can be used with a [static export](/docs/app/guides/static-ex
 
 Middleware uses the [Edge runtime](/docs/app/api-reference/edge), a subset of all available Node.js APIs to help ensure low latency, since it may run in front of every route or asset in your application. If you do not want this, you can use the [full Node.js runtime](/blog/next-15-2#nodejs-middleware-experimental) to run Middleware.
 
-If you are looking to add logic (or use an external package) that requires all Node.js APIs, you might be able to move this logic to a [layout](/docs/app/building-your-application/routing/layouts-and-templates#layouts) as a [Server Component](/docs/app/getting-started/server-and-client-components). For example, checking [headers](/docs/app/api-reference/functions/headers) and [redirecting](/docs/app/api-reference/functions/redirect). You can also use headers, cookies, or query parameters to [redirect](/docs/app/api-reference/config/next-config-js/redirects#header-cookie-and-query-matching) or [rewrite](/docs/app/api-reference/config/next-config-js/rewrites#header-cookie-and-query-matching) through `next.config.js`. If that does not work, you can also use a [custom server](/docs/pages/guides/custom-server).
+If you are looking to add logic (or use an external package) that requires all Node.js APIs, you might be able to move this logic to a [layout](/docs/app/getting-started/layouts-and-pages#creating-a-layout) as a [Server Component](/docs/app/getting-started/server-and-client-components). For example, checking [headers](/docs/app/api-reference/functions/headers) and [redirecting](/docs/app/api-reference/functions/redirect). You can also use headers, cookies, or query parameters to [redirect](/docs/app/api-reference/config/next-config-js/redirects#header-cookie-and-query-matching) or [rewrite](/docs/app/api-reference/config/next-config-js/rewrites#header-cookie-and-query-matching) through `next.config.js`. If that does not work, you can also use a [custom server](/docs/pages/guides/custom-server).
 
 ## Environment Variables
 

diff --git a/docs/01-app/02-guides/tailwind-css.mdx b/docs/01-app/02-guides/tailwind-css.mdx
@@ -45,7 +45,7 @@ Add the [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-dir
 @import 'tailwindcss';
 ```
 
-Inside the [root layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) (`app/layout.tsx`), import the `globals.css` stylesheet to apply the styles to every route in your application.
+Inside the [root layout](/docs/app/api-reference/file-conventions/layout#root-layouts) (`app/layout.tsx`), import the `globals.css` stylesheet to apply the styles to every route in your application.
 
 ```tsx filename="app/layout.tsx" switcher
 import type { Metadata } from 'next'