From d657d09a71a3ab30d59c341690aa8c9edeb444e9 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 4 Jun 2025 09:16:17 +0100 Subject: [PATCH 1/6] Clarify how intercepting routes work, update example --- .../03-file-conventions/intercepting-routes.mdx | 4 ++-- .../03-file-conventions/parallel-routes.mdx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx index 46d6d4ce0971..225c2dc3ff41 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx @@ -32,7 +32,7 @@ However, when navigating to the photo by clicking a shareable URL or by refreshi ## Convention -Intercepting routes can be defined with the `(..)` convention, which is similar to relative path convention `../` but for segments. +Intercepting routes can be defined with the `(..)` convention, which is similar to relative path convention `../` but for route segments. You can use: @@ -51,7 +51,7 @@ For example, you can intercept the `photo` segment from within the `feed` segmen height="604" /> -> Note that the `(..)` convention is based on _route segments_, not the file-system. +> **Good to know:** Note that the `(..)` convention is based on _route segments_, not the file-system. For example, it does not consider `@slot` folders in [Parallel Routes](/docs/app/api-reference/file-conventions/parallel-routes). ## Examples diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index a250c4adc37f..51fc8e61062d 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -276,9 +276,9 @@ export default function Default() { } ``` -Inside your `@auth` slot, intercept the `/login` route by updating the `/(.)login` folder. Import the `` component and its children into the `/(.)login/page.tsx` file: +Inside your `@auth` slot, intercept the `/login` route by importing the `` component and its children into the `/login/page.tsx` file, and updating the folder name to `/(..)login/page.tsx`. -```tsx filename="app/@auth/(.)login/page.tsx" switcher +```tsx filename="app/@auth/(..)login/page.tsx" switcher import { Modal } from '@/app/ui/modal' import { Login } from '@/app/ui/login' @@ -291,7 +291,7 @@ export default function Page() { } ``` -```jsx filename="app/@auth/(.)login/page.js" switcher +```jsx filename="app/@auth/(..)login/page.js" switcher import { Modal } from '@/app/ui/modal' import { Login } from '@/app/ui/login' @@ -306,7 +306,7 @@ export default function Page() { > **Good to know:** > -> - The convention used to intercept the route, e.g. `(.)`, depends on your file-system structure. See [Intercepting Routes convention](/docs/app/api-reference/file-conventions/intercepting-routes#convention). +> - The convention `(..)` is used for intercepting routes. See [Intercepting Routes](/docs/app/api-reference/file-conventions/intercepting-routes#convention) docs for more information. > - By separating the `` functionality from the modal content (``), you can ensure any content inside the modal, e.g. [forms](/docs/app/guides/forms), are Server Components. See [Interleaving Client and Server Components](/docs/app/getting-started/server-and-client-components#examples#supported-pattern-passing-server-components-to-client-components-as-props) for more information. #### Opening the modal From ae469563753810a4d004d44dd30a26aa207a9aab Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Wed, 4 Jun 2025 11:01:51 +0100 Subject: [PATCH 2/6] Nit --- .../05-api-reference/03-file-conventions/parallel-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index 51fc8e61062d..e2d790ad999e 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -461,7 +461,7 @@ export default function CatchAll() { > **Good to know:** > -> - We use a catch-all route in our `@auth` slot to close the modal because of how parallel routes behave(#behavior). Since client-side navigations to a route that no longer match the slot will remain visible, we need to match the slot to a route that returns `null` to close the modal. +> - We use a catch-all route in our `@auth` slot to close the modal because of how parallel routes behave. Since client-side navigations to a route that no longer match the slot will remain visible, we need to match the slot to a route that returns `null` to close the modal. > - Other examples could include opening a photo modal in a gallery while also having a dedicated `/photo/[id]` page, or opening a shopping cart in a side modal. > - [View an example](https://github.com/vercel-labs/nextgram) of modals with Intercepted and Parallel Routes. From c73111198ef0f0fd7c2e6a7201d8bf6f0292cd08 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Fri, 6 Jun 2025 08:40:40 +0100 Subject: [PATCH 3/6] Update docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx --- .../03-file-conventions/intercepting-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx index 225c2dc3ff41..e6c3f9479e9f 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/intercepting-routes.mdx @@ -51,7 +51,7 @@ For example, you can intercept the `photo` segment from within the `feed` segmen height="604" /> -> **Good to know:** Note that the `(..)` convention is based on _route segments_, not the file-system. For example, it does not consider `@slot` folders in [Parallel Routes](/docs/app/api-reference/file-conventions/parallel-routes). +> **Good to know:** The `(..)` convention is based on _route segments_, not the file-system. For example, it does not consider `@slot` folders in [Parallel Routes](/docs/app/api-reference/file-conventions/parallel-routes). ## Examples From 33b37704511c3d32d53b59be885fc377551eea45 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Fri, 6 Jun 2025 10:48:19 +0100 Subject: [PATCH 4/6] Update parallel-routes.mdx --- .../05-api-reference/03-file-conventions/parallel-routes.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index bfcb184397e8..404c5b2cc5e4 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -276,7 +276,7 @@ export default function Default() { } ``` -Inside your `@auth` slot, intercept the `/login` route by importing the `` component and its children into the `/login/page.tsx` file, and updating the folder name to `/(..)login/page.tsx`. +Inside your `@auth` slot, intercept the `/login` route by importing the `` component and its children into the `@auth/(.)login/page.tsx` file, and updating the folder name to `/@auth/(.)login/page.tsx`. ```tsx filename="app/@auth/(..)login/page.tsx" switcher import { Modal } from '@/app/ui/modal' @@ -306,7 +306,7 @@ export default function Page() { > **Good to know:** > -> - The convention `(..)` is used for intercepting routes. See [Intercepting Routes](/docs/app/api-reference/file-conventions/intercepting-routes#convention) docs for more information. +> - The convention `(.)` is used for intercepting routes. See [Intercepting Routes](/docs/app/api-reference/file-conventions/intercepting-routes#convention) docs for more information. > - By separating the `` functionality from the modal content (``), you can ensure any content inside the modal, e.g. [forms](/docs/app/guides/forms), are Server Components. See [Interleaving Client and Server Components](/docs/app/getting-started/server-and-client-components#examples#supported-pattern-passing-server-components-to-client-components-as-props) for more information. #### Opening the modal From e789f3acd7a5d01b026a29a0542de7e71ffa748e Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Tue, 10 Jun 2025 11:13:53 +0100 Subject: [PATCH 5/6] Update docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx Co-authored-by: Joseph --- .../05-api-reference/03-file-conventions/parallel-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index 404c5b2cc5e4..6b1fafd1920b 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -278,7 +278,7 @@ export default function Default() { Inside your `@auth` slot, intercept the `/login` route by importing the `` component and its children into the `@auth/(.)login/page.tsx` file, and updating the folder name to `/@auth/(.)login/page.tsx`. -```tsx filename="app/@auth/(..)login/page.tsx" switcher +```tsx filename="app/@auth/(.)login/page.tsx" switcher import { Modal } from '@/app/ui/modal' import { Login } from '@/app/ui/login' From 4fe481df4b075dc118990873238ba00e2d6544e2 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> Date: Tue, 10 Jun 2025 11:14:04 +0100 Subject: [PATCH 6/6] Update docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx Co-authored-by: Joseph --- .../05-api-reference/03-file-conventions/parallel-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx index 6b1fafd1920b..7ccbc41c4a75 100644 --- a/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx +++ b/docs/01-app/05-api-reference/03-file-conventions/parallel-routes.mdx @@ -291,7 +291,7 @@ export default function Page() { } ``` -```jsx filename="app/@auth/(..)login/page.js" switcher +```jsx filename="app/@auth/(.)login/page.js" switcher import { Modal } from '@/app/ui/modal' import { Login } from '@/app/ui/login'