Next.js Discord

Discord Forum

Keep parallel routes for other routes

Answered
Saint Hubert Jura Hound posted this in #help-forum
Open in Discord
Saint Hubert Jura HoundOP
Hello, I would like to declare a sidebar parallel route in my chat folder, and that it is also accessible in the [id] folder which is also in the chat folder. Is it possible ?
Answered by Saint Hubert Jura Hound
I do this
import { Suspense } from 'react'

import { AccountDropdown } from './account-dropdown'
import { AccountDropdownLoading, SidebarUsersLoading } from './loading'
import { SidebarUsers } from './sidebar-users'

export async function Sidebar() {
  return (
    <nav className='flex min-h-screen flex-col gap-4 rounded-md border-r p-2'>
      <h1 className='font-heading text-2xl'>Next Chat</h1>

      <div className='flex flex-auto flex-col items-start gap-2'>
        <Suspense fallback={<SidebarUsersLoading />}>
          <SidebarUsers />
        </Suspense>
      </div>

      <Suspense fallback={<AccountDropdownLoading />}>
        <AccountDropdown />
      </Suspense>
    </nav>
  )
}
View full answer

10 Replies

it will be shown both in /chat/page.tsx and /chat/[chatId]/page.tsx
@aardani you can just use the Sidebar component in `/chat/layout.tsx`
Saint Hubert Jura HoundOP
But I would not be able to put a loading for the sidebar, when fetching users in it
@Saint Hubert Jura Hound But I would not be able to put a loading for the sidebar, when fetching users in it
aardani
you can put loading page of the sidebar in many ways, either using <Suspense> or handle the fetching in client
or you could just put loading ui in /loading.tsx
Saint Hubert Jura HoundOP
What I want is to have a loader in my layout which will be in all the pages
@aardani
@Saint Hubert Jura Hound What I want is to have a loader in my layout which will be in all the pages
aardani
You can create top level loading.tsx which will be shown at all pages
@aardani You can create top level loading.tsx which will be shown at all pages
Saint Hubert Jura HoundOP
I do this
import { Suspense } from 'react'

import { AccountDropdown } from './account-dropdown'
import { AccountDropdownLoading, SidebarUsersLoading } from './loading'
import { SidebarUsers } from './sidebar-users'

export async function Sidebar() {
  return (
    <nav className='flex min-h-screen flex-col gap-4 rounded-md border-r p-2'>
      <h1 className='font-heading text-2xl'>Next Chat</h1>

      <div className='flex flex-auto flex-col items-start gap-2'>
        <Suspense fallback={<SidebarUsersLoading />}>
          <SidebarUsers />
        </Suspense>
      </div>

      <Suspense fallback={<AccountDropdownLoading />}>
        <AccountDropdown />
      </Suspense>
    </nav>
  )
}
Answer
aardani
Ok, glad it worked!