Hi @cloud glade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Explanations next doc example
vague hatchBOT
Hello! Your understanding of parallel routes is correct. Parallel routes in Next.js allow you to simultaneously or conditionally render one or more pages within the same layout. They are particularly useful for highly dynamic sections of an app, such as dashboards and feeds on social sites source (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes).
In the example you mentioned, the login modal can indeed be opened from both the /dashboard page and the /dashboard/login page. This is achieved by using the @auth slot in the shared layout. The @auth slot is not a route segment and does not affect the URL structure. It's used to conditionally render the login modal based on whether the /login route is active source (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals).
The advantage of using parallel routes over traditional components is that they provide a more flexible and dynamic way to manage your application's UI. With parallel routes, you can:
- Simultaneously render multiple pages in the same view that can be navigated independently. This is useful for creating split views with their own sub-navigation, such as dashboards source (https://nextjs.org/docs/app/building-your-application/routing#advanced-routing-patterns).
- Conditionally render routes based on certain conditions, such as user roles source (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes).
- Create modals that are shareable through a URL, preserve context when the page is refreshed, close on backwards navigation, and reopen on forwards navigation source (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals).
However, it's important to note that parallel routes are meant to be used within a shared layout. Currently, Next.js does not support creating a separate layout.tsx file per slot source (https://github.com/vercel/next.js/issues/58506).
I hope this helps! If you have any more questions, feel free to ask.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
cloud glade
@vague hatch okay thank you, but I mean, what's the point of opening the logging modal when you're already in the login page ? Is there a way to have the same overall behavior but without the link when /login page is rendered ?
Maybe https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments ? But this is a client hook
vague hatchBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you're on the right track! You can indeed use the useSelectedLayoutSegment hook to determine the current active route segment and conditionally render the login link based on that. This hook can be used in a client component to read the active route segment within a slot source (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments).
Here's an example of how you might use it:
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
export default function Layout({
auth,
children,
}: {
auth: React.ReactNode
children: React.ReactNode
}) {
const loginSegment = useSelectedLayoutSegment('auth')
return (
<>
<nav>
{loginSegment !== 'login' && <Link href="/login">Open modal</Link>}
</nav>
<div>{auth}</div>
<div>{children}</div>
</>
)
}
In this example, the Open modal link will only be rendered if the current active route segment is not login. This means that the link will not be displayed on the /login page, but it will be displayed on all other pages.