Implementing parallel routes in Next.js 14 for complex layouts

Code

// app/@modal/page.tsx
export default function Modal() {
  return (
    <div className="modal">
      <h1>I'm rendered in parallel!</h1>
    </div>
  )
}

// app/layout.tsx
export default function Layout({ 
  children,
  modal
}: { 
  children: React.ReactNode
  modal: React.ReactNode 
}) {
  return (
    <div>
      {children}
      {modal}
    </div>
  )
}