CODEWITHSUNDEEP
reactjstypescriptnext.jsroutes
MrPand
MrPand

Reputation: 45

Next.js page doesn't show up in window

I created a next.js project with App Router and under app folder my file structure looks like that:

    *some other files*
    .
    .
    user 
    | [id] 
    |  | page.tsx
    | @users 
    |   | page.tsx 
    | layout.tsx 
    | page.tsx

I want to make a parallel routing and show users list and spesific user on the same page when the url matches /user/[id] (eg. /user/12)

My layout.tsx file inside user

import { NextPage } from 'next'
import React from 'react'

interface Props {
    children: React.ReactNode,
    users: React.ReactNode
}

const UserLayout: NextPage<Props> = ({ children, users }) => {
    return <div className='flex flex-row items-center w-screen h-screen'>
        <div className='font-normal text-4xl text-slate-500 basis-60 flex-shrink text-center'>
            Users
        </div>
        <div className='flex-grow'>
            {users}
        </div>
        <div className='flex-grow'>
            {children}
        </div>
    </div>
}



export default UserLayout

(i changed the contents & styles in the file, whatever...)

On user/12, the page renders layout and [id]'s page but not @users page. I tried to move [id] folder to inside of @user-profile file and added it to the user's layout but it didn't work either. How can i do that?

Thx,

Upvotes: 1

Views: 879

Answers (1)

Antnrmnd
Antnrmnd

Reputation: 48

Edit:

If you try to log users to the console from the Layout component, you probably get undefined, so no matter how hard you try, the component will not show up on your Layout component. The reason for this is because the compiler doesn't see the @users folder. You just need to restart the server and it should work out just fine.

You posted this yesterday, so I assume when you come back to it, if the local server was shut down, it should work fine by now, but you might try to create more parallel routes later on and it might just save you some time in the future.

** I don't know if it's just the current nextjs release that has a bug, or if it's more deeply rooted, so this answer might be obsolete later.

Upvotes: 2

Related Questions