Multiple Layouts | Next.js | Page 1

grand berry Aug 10, 2023, 9:55 AM

#

How do I have a set layout for a group endpoints and have a totally different layout for another group of endpoints?

agile cloakBOT Aug 10, 2023, 9:55 AM

#

Hi @grand berry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, you can achieve this by using Route Groups and Layouts. Here's how you can do it:

Create Route Groups: Route groups can be created by wrapping a folder in parenthesis: (folderName). This indicates the folder is for organizational purposes and should not be included in the route's URL path. For example, you can create two route groups (shop) and (marketing) for different sections of your application. source (https://nextjs.org/docs/app/building-your-application/routing/route-groups)
Create Layouts for each Route Group: To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each route group. This is useful for partitioning an application into sections that have a completely different UI or experience. The <html> and <body> tags need to be added to each root layout. source (https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)

Here's an example of how a layout file might look:

export default function RootLayout({
 children,
}: {
 children: React.ReactNode
}) {
 return (
 <html lang="en">
 <body>{children}</body>
 </html>
 )
}

source (https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)

Remember, navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). This only applies to multiple root layouts. source (https://nextjs.org/docs/app/api-reference/file-conventions/layout)

#

Also, the naming of route groups has no special significance other than for organization. They do not affect the URL path. Routes that include a route group should not resolve to the same URL path as other routes. source (https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:

#

@grand berry kapa.ai is still learning and improving, please let us know how it did by reacting below

grand berry Aug 10, 2023, 10:03 AM

#

@agile cloak i've implemented this, but now a lot of my routes don't work and just show a 404 page

agile cloakBOT Aug 10, 2023, 10:04 AM

#

Let me check the knowledge base for you. One moment! :books:

#

If you're seeing a 404 page for many of your routes, it could be due to a few reasons:

Route Groups and URL Paths: Remember that route groups do not affect the URL path. If you have routes that include a route group, they should not resolve to the same URL path as other routes. For example, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error. source (https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
Home Page in Route Group: If you use multiple root layouts without a top-level layout.js file, your home page.js file should be defined in one of the route groups, For example: app/(marketing)/page.js. source (https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
Custom 404 Page: Next.js provides a static 404 page by default. If you've created a custom 404 page by creating a pages/404.js file, ensure that it's correctly implemented. source (https://nextjs.org/docs/pages/building-your-application/routing/custom-error)

If you've checked all of these and your routes are still not working, you might want to revisit the Next.js documentation on Routing (https://nextjs.org/docs/app/building-your-application/routing) and Route Groups (https://nextjs.org/docs/app/building-your-application/routing/route-groups) to ensure you've followed the conventions correctly.

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:

#

@grand berry kapa.ai is still learning and improving, please let us know how it did by reacting below

onyx bridge Aug 10, 2023, 12:11 PM

#

grand berry <@1072591948499664996> i've implemented this, but now a lot of my routes don't w...

you can create router groups

grand berry Aug 10, 2023, 12:11 PM

#

onyx bridge you can create router groups

what

#

is that not what it told me

#

or is it something different

onyx bridge Aug 10, 2023, 12:12 PM

#

you will have a default layout in root and the you can create (name) folder and inside that you can create a layout which will give you different layout for each category

grand berry Aug 10, 2023, 12:13 PM

#

yes.. thats what it said..

onyx bridge Aug 10, 2023, 12:13 PM

#

https://nextjs.org/docs/getting-started/project-structure#route-groups-and-private-folders

Getting Started: Project Structure

A list of folders and files conventions in a Next.js project

#

this will help

grand berry Aug 10, 2023, 12:14 PM

#

yes i already know that

#

thats what it told me

#

and i knew that existed

onyx bridge Aug 10, 2023, 12:14 PM

#

ok ok

grand berry Aug 10, 2023, 12:14 PM

#

the issue was that any routes inside the route group wouldnt function and would just go to a 404 page

#

so (name)/page.tsx would work but (name)/route/page.tsx wouldnt

onyx bridge Aug 10, 2023, 12:15 PM

#

can you show the code? of layout

grand berry Aug 10, 2023, 12:15 PM

#

theres not any to show..

#

its file structure

onyx bridge Aug 10, 2023, 12:15 PM

#

layout file code inside router group

grand berry Aug 10, 2023, 12:15 PM

#

alright

#

so root layout was this ```jsx
// styles
import './globals.css'

// next
import type { Metadata } from 'next'
import { Poppins, Lilita_One } from 'next/font/google'

const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'], variable: '--font-poppins' })
const lilita = Lilita_One({ subsets: ['latin'], weight: ['400'], variable: '--font-lilita' })

export const metadata: Metadata = {
title: 'Phase | Discord Bot',
description: 'Phase provides a comprehensive set of tools that enable effortless management, moderation, and optimization of your Discord servers.',
icons: '/favicon.png',
authors: [{ name: 'charliee', url: 'https://github.com/notcharliee' }],
creator: 'Phase Team',
keywords: ['discord', 'bot', 'phase', 'phase bot', 'notcharliee', 'phase', 'next.js', 'discord.js', 'mongodb'],
openGraph: {
type: 'website',
url: 'https://phasebot.xyz',
title: 'Phase | Discord Bot',
description: 'Phase provides a comprehensive set of tools that enable effortless management, moderation, and optimization of your Discord servers.',
siteName: 'Phase',
images: [{
url: '/phase.png'
}]
}
}

export default function rootLayout({ children }: { children: React.ReactNode }) {
return <html lang='en' className={${poppins.variable} ${lilita.variable}}>{children}</html>
}

#

and route group layout was this ```tsx
// next
import { cookies } from 'next/headers'
import Link from 'next/link'
import Image from 'next/image'

// utils
import Scripts from '@/utils/components/scripts'
import HeaderDropdown from '@/utils/components/dropdowns/header'

// packages
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import * as solid from '@fortawesome/free-solid-svg-icons'

export default function rootLayout({ children }: { children: React.ReactNode }) {

return (
    <body className='font-poppins min-h-screen bg-neutral-950 flex flex-col items-center justify-between'>
        <Scripts></Scripts>
        <div id='cursor-blob' className='bg-white h-3 w-3 fixed left-0 top-0 rounded-full opacity-0 z-50 duration-300 pointer-events-none scale-0'></div>
        <div id='bg-grid' className='fixed -z-50 w-full h-full' style={{ background: 'radial-gradient(circle, rgb(25, 25, 25) 25%, transparent 25%) 0 0 / 16px 16px' }}></div>
        <header className='w-full max-w-[1536px] p-8 flex justify-between items-center'>
            <Link href='/' className='flex items-center h-8'><Image src='/banner.svg' alt='Phase Banner' priority height={0} width={0} style={{ width: 'auto', height: 'auto' }}/></Link>
            <div className='flex flex-wrap justify-center items-center gap-2 font-semibold text-sm text-[0.75rem] sm:gap-4 sm:text-base text-neutral-400'>
                <HeaderDropdown></HeaderDropdown>
                <Link href='/modules' className='gradient-text-hover hidden sm:block'>Modules</Link>
                <Link href='/commands' className='gradient-text-hover hidden sm:block'>Commands</Link>
                {cookies().get('session') ? 
                    <Link href='/dashboard' className='bg-white text-black p-2 hover:text-white gradient-bg-hover flex gap-2 items-center group'>
                        <FontAwesomeIcon icon={solid.faCircleUser} className='text-black group-hover:text-white w-5 h-5'></FontAwesomeIcon>Dashboard
                    </Link> :
                    <Link href='/redirect/login' className='bg-white text-black p-2 hover:text-white gradient-bg-hover'>Login</Link>
                }
            </div>
        </header>
        <main className='w-full max-w-[1536px] p-8 flex flex-col justify-center gap-32 min-h-[calc(100vh-6rem)] z-0'>
            {children}
        </main>
        <footer className='w-full max-w-[1536px] p-8 flex flex-col items-center gap-2'>
            <div className='rounded w-32 h-1 bg-neutral-400'></div>
            <span className='font-semibold text-sm sm:text-base mt-12'>Find an issue with this page? <Link href='https://github.com/xictul/phasesite' target='_blank' className='gradient-text'>Fix it on GitHub</Link></span>
            <span className='font-semibold text-sm sm:text-base'>Need help? <Link href='/redirect/discord' target='_blank' className='gradient-text'>Join the Discord</Link></span>
            <span className='font-lilita text-xl uppercase mt-4'>Helpful Links</span>
            <div className='flex flex-wrap justify-center gap-2 font-semibold text-sm text-[0.75rem] sm:text-base text-neutral-400'>
                <Link href='/modules' className='gradient-text-hover'>Modules</Link>·
                <Link href='/commands' className='gradient-text-hover'>Commands</Link>·
                <Link href='/redirect/login' className='gradient-text-hover'>Login</Link>·
                <Link href='/privacy' className='gradient-text-hover'>Privacy</Link>·
                <Link href='/terms' className='gradient-text-hover'>Terms</Link>
            </div>
            <span className='font-semibold text-sm text-[0.75rem] gradient-text mt-4'>Copyright © 2023 Phase</span>
        </footer>
    </body>
)

}```

onyx bridge Aug 10, 2023, 12:17 PM

#

yeah so there will be no body inside the router group layout file

#

you can use fragment

#

body tag

grand berry Aug 10, 2023, 12:17 PM

#

but there is a body in the router group layout file

#

and the html tag is in the root layout

onyx bridge Aug 10, 2023, 12:18 PM

#

there will be only one body and html and that is inside root layout

#

can you also show the file structure

grand berry Aug 10, 2023, 12:18 PM

#

so just use <></> then

#

and put body into root

onyx bridge Aug 10, 2023, 12:18 PM

#

grand berry so just use <></> then

yes

onyx bridge Aug 10, 2023, 12:18 PM

#

grand berry and put body into root

yes

grand berry Aug 10, 2023, 12:19 PM

#

then why did the (name)/page.tsx work when (page)/route/page.tsx did not?

onyx bridge Aug 10, 2023, 12:19 PM

#

so the root will be / only

#

can you share screenshot of folder structure

grand berry Aug 10, 2023, 12:20 PM

#

i messed around a bit with it but yes, give me a minute to get it back to what it was

onyx bridge Aug 10, 2023, 12:21 PM

#

perfect

grand berry Aug 10, 2023, 12:22 PM

#

onyx bridge perfect

onyx bridge Aug 10, 2023, 12:23 PM

#

and what page you want to navigate that is giving error?

grand berry Aug 10, 2023, 12:24 PM

#

any of them in the main layout that wasnt page.tsx would return the not-found.tsx page instead

#

but the ones in basic layout worked fine

#

and i did try adding a second route to that to test if it worked but that returned 404 again

onyx bridge Aug 10, 2023, 12:24 PM

#

app/(main-layout)/page.tsx ---> / path

grand berry Aug 10, 2023, 12:25 PM

#

yeah.

#

that worked

#

and app/(basic-layout)/gen/rank/page.tsx ---> /gen/rank path too

#

but when i did app/(basic-layout)/test/page.tsx it did not

#

went to 404 again

onyx bridge Aug 10, 2023, 12:26 PM

#

because you dont have a test folder

grand berry Aug 10, 2023, 12:27 PM

#

?

#

yeah, because i got rid of it

#

forgot to add it back

#

my bad

#

didnt work though

onyx bridge Aug 10, 2023, 12:27 PM

#

can you try again?

grand berry Aug 10, 2023, 12:27 PM

#

mhm, one moment

onyx bridge Aug 10, 2023, 12:29 PM

#

app/(basic-layout)/test/page.tsx ----> "/test" path

grand berry Aug 10, 2023, 12:29 PM

#

thats odd, it worked this time. i set it up exactly as it was before and it's alright

grand berry Aug 10, 2023, 12:29 PM

#

onyx bridge app/(basic-layout)/test/page.tsx ----> "/test" path

yep

#

and the other route in basic layout works as well

onyx bridge Aug 10, 2023, 12:29 PM

#

well it happens 😂

grand berry Aug 10, 2023, 12:29 PM

#

the joys of programming

onyx bridge Aug 10, 2023, 12:29 PM

#

hahahahha

#

well its great it is fixed

#

happy coding

grand berry Aug 10, 2023, 12:30 PM

#

onyx bridge well its great it is fixed

not quite

#

the other routes in main layout are still broken

#

only in basic layout its okay

onyx bridge Aug 10, 2023, 12:30 PM

#

maybe the body tag was the issue

grand berry Aug 10, 2023, 12:31 PM

#

export default function rootLayout({ children }: { children: React.ReactNode }) {
    return <body className='font-poppins min-h-screen bg-black flex flex-col items-start justify-start'>{children}</body>
}```

#

thats for the basic layout

grand berry Aug 10, 2023, 12:31 PM

#

grand berry and route group layout was this ```tsx // next import { cookies } from 'next/hea...

and this was for the main layout

onyx bridge Aug 10, 2023, 12:32 PM

#

so try removing all the body tag from all the layouts and just add it to rootlayout of app dir

#

just return the childrens

grand berry Aug 10, 2023, 12:33 PM

#

okay, will do

grand berry Aug 10, 2023, 12:36 PM

#

onyx bridge just return the childrens

alright so again the / path works, along with all the paths in the basic layout, but all other routes defined in the main layout return 404

#

i'm going to try switching the layout in the main layout to be the same as the basic layout and see how it goes

#

did not work

#

https://tenor.com/view/i-am-losing-my-grip-on-reality-i-have-gone-clinically-insane-my-descent-to-madness-is-complete-ive-gone-completely-mental-i-am-beyond-the-point-of-no-return-gif-23191724

Tenor

onyx bridge Aug 10, 2023, 12:38 PM

#

can you get on call ? with screen share ?

#

so maybe there will be more that one layout after the rootlayout

#

in other folder group you need to have a folder then a route

grand berry Aug 10, 2023, 12:39 PM

#

i can do that, though no idea where my mic is so i'll have to communicate through dms for now

onyx bridge Aug 10, 2023, 12:40 PM

#

ok

grand berry Aug 10, 2023, 12:41 PM

#

interestingly all the routes in my public dir still work

onyx bridge Aug 10, 2023, 12:41 PM

#

😂 😂 😂

#

is your code on github ?

grand berry Aug 10, 2023, 12:42 PM

#

not currently

#

i can screenshare but wont be able to actually respond

onyx bridge Aug 10, 2023, 12:43 PM

#

got it

#

or should recreate your routing structure and share to you

#

can you come on sandbox ?

grand berry Aug 10, 2023, 12:45 PM

#

im up for anything that releases me from this hell tbh

grand berry Aug 10, 2023, 12:45 PM

#

onyx bridge can you come on sandbox ?

am i supposed to know what that is

onyx bridge Aug 10, 2023, 12:45 PM

#

yeah online IDE

grand berry Aug 10, 2023, 12:46 PM

#

https://codesandbox.io ?

CodeSandbox

CodeSandbox: Code, Review and Deploy in Record Time

CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.

#

their website is so slow

onyx bridge Aug 10, 2023, 12:53 PM

#

this is working for me

#

all the routes are working

#

do you need the code. ?

grand berry Aug 10, 2023, 12:53 PM

#

yes please

onyx bridge Aug 10, 2023, 12:54 PM

#

📎 route-test.zip

#

can you try this ?

grand berry Aug 10, 2023, 12:55 PM

#

yes, one moment

#

yep, annoyingly that all works

#

@onyx bridge would you like to get on call?
i can screenshare for you so you can get a better look

onyx bridge Aug 10, 2023, 1:00 PM

#

sounds good

onyx bridge Aug 10, 2023, 1:01 PM

#

onyx bridge

was this working for you ?

#Multiple Layouts

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon:

`Note: you can ask me a follow up question by @ mentioning me again` :speech_balloon: