diff --git a/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx index 3ea96bfd3db97..8cc9d060d5730 100644 --- a/docs/01-app/01-getting-started/02-project-structure.mdx +++ b/docs/01-app/01-getting-started/02-project-structure.mdx @@ -66,10 +66,10 @@ Top-level files are used to configure your application, manage dependencies, run ### Nested routes -| | | -| ---------------------------------------------------------------------------- | -------------------- | -| [`folder`](/docs/app/building-your-application/routing#route-segments) | Route segment | -| [`folder/folder`](/docs/app/building-your-application/routing#nested-routes) | Nested route segment | +| | | +| --------------- | -------------------- | +| `folder` | Route segment | +| `folder/folder` | Nested route segment | ### Dynamic routes @@ -203,7 +203,7 @@ Apart from [folder and file conventions](/docs/app/getting-started/project-struc ### Colocation -In the `app` directory, [nested folder hierarchy](/docs/app/building-your-application/routing#route-segments) defines route structure. Each folder represents a route segment that is mapped to a corresponding segment in a URL path. +In the `app` directory, nested folders define route structure. Each folder represents a route segment that is mapped to a corresponding segment in a URL path. However, even though route structure is defined through folders, a route is **not publicly accessible** until a `page.js` or `route.js` file is added to a route segment. diff --git a/docs/01-app/03-building-your-application/01-routing/02-pages.mdx b/docs/01-app/03-building-your-application/01-routing/02-pages.mdx index 121f82a20d240..2f63d5a46be40 100644 --- a/docs/01-app/03-building-your-application/01-routing/02-pages.mdx +++ b/docs/01-app/03-building-your-application/01-routing/02-pages.mdx @@ -52,7 +52,7 @@ export default function Page() { > **Good to know**: > > - The `.js`, `.jsx`, or `.tsx` file extensions can be used for Pages. -> - A page is always the [leaf](/docs/app/building-your-application/routing#terminology) of the [route subtree](/docs/app/building-your-application/routing#terminology). +> - A page is always the **leaf** of the route subtree. > - A `page.js` file is required to make a route segment publicly accessible. > - Pages are [Server Components](/docs/app/building-your-application/rendering/server-components) by default, but can be set to a [Client Component](/docs/app/building-your-application/rendering/client-components). > - Pages can fetch data. View the [Data Fetching](/docs/app/building-your-application/data-fetching) section for more information. diff --git a/docs/01-app/03-building-your-application/01-routing/05-error-handling.mdx b/docs/01-app/03-building-your-application/01-routing/05-error-handling.mdx index 7c28e397dce38..9a80e88c2deb1 100644 --- a/docs/01-app/03-building-your-application/01-routing/05-error-handling.mdx +++ b/docs/01-app/03-building-your-application/01-routing/05-error-handling.mdx @@ -215,7 +215,7 @@ If you want errors to bubble up to the parent error boundary, you can `throw` wh ### Handling Errors in Nested Routes -Errors will bubble up to the nearest parent error boundary. This allows for granular error handling by placing `error.tsx` files at different levels in the [route hierarchy](/docs/app/building-your-application/routing#component-hierarchy). +Errors will bubble up to the nearest parent error boundary. This allows for granular error handling by placing `error.tsx` files at different levels in the [route hierarchy](/docs/app/getting-started/project-structure#component-hierarchy). Nested Error Component Hierarchy **Good to know**: > diff --git a/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx b/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx index 8b513f0209ffd..ed45effbbb443 100644 --- a/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx +++ b/docs/01-app/03-building-your-application/11-upgrading/05-app-router-migration.mdx @@ -100,13 +100,13 @@ See the [Font Optimization](/docs/app/building-your-application/optimizing/fonts > **🎥 Watch:** Learn how to incrementally adopt the App Router → [YouTube (16 minutes)](https://www.youtube.com/watch?v=YQMSietiFm0). -Moving to the App Router may be the first time using React features that Next.js builds on top of such as Server Components, Suspense, and more. When combined with new Next.js features such as [special files](/docs/app/building-your-application/routing#file-conventions) and [layouts](/docs/app/building-your-application/routing/layouts-and-templates#layouts), migration means new concepts, mental models, and behavioral changes to learn. +Moving to the App Router may be the first time using React features that Next.js builds on top of such as Server Components, Suspense, and more. When combined with new Next.js features such as [special files](/docs/app/api-reference/file-conventions) and [layouts](/docs/app/api-reference/file-conventions/layout), migration means new concepts, mental models, and behavioral changes to learn. We recommend reducing the combined complexity of these updates by breaking down your migration into smaller steps. The `app` directory is intentionally designed to work simultaneously with the `pages` directory to allow for incremental page-by-page migration. - The `app` directory supports nested routes _and_ layouts. [Learn more](/docs/app/building-your-application/routing). - Use nested folders to [define routes](/docs/app/building-your-application/routing/defining-routes) and a special `page.js` file to make a route segment publicly accessible. [Learn more](#step-4-migrating-pages). -- [Special file conventions](/docs/app/building-your-application/routing#file-conventions) are used to create UI for each route segment. The most common special files are `page.js` and `layout.js`. +- [Special file conventions](/docs/app/api-reference/file-conventions) are used to create UI for each route segment. The most common special files are `page.js` and `layout.js`. - Use `page.js` to define UI unique to a route. - Use `layout.js` to define UI that is shared across multiple routes. - `.js`, `.jsx`, or `.tsx` file extensions can be used for special files.