Next.js Discord

Discord Forum

router in Next13 Rootlayout

Unanswered
Tufted Flycatcher posted this in #help-forum
Open in Discord
Original message was deleted.

4 Replies

Tufted Flycatcher
is it good practice to do something like this in my RootLayout:'use client'
import { Inter, Lexend } from 'next/font/google'
import clsx from 'clsx'
import '@/styles/tailwind.css'
import AuthLayout from '@/components/AuthLayout'
// export const metadata = {
// title: {
// template: '%s - PartSoft',
// default: 'PartSoft - Efficient Truck Parts Ordering for Shops',
// },
// description:
// 'Finding the right truck parts can be cumbersome. PartSoft streamlines the process, ensuring shops get what they need quickly and accurately.',
// }

const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})

const lexend = Lexend({
subsets: ['latin'],
display: 'swap',
variable: '--font-lexend',
})

export default function RootLayout({ children }) {
const pathname = window.location.pathname

if (pathname.startsWith('/dashboard')) {
return <AuthLayout>{children}</AuthLayout>
}

return (
<html
lang="en"
className={clsx(
'h-full scroll-smooth bg-white antialiased',
inter.variable,
lexend.variable,
)}
>
<body className="flex h-full flex-col">{children}</body>
</html>
)
}
is it good practice to do something like this in my RootLayout:
'use client'
import { Inter, Lexend } from 'next/font/google'
import clsx from 'clsx'
import '@/styles/tailwind.css'
import AuthLayout from '@/components/AuthLayout'
// export const metadata = {
//   title: {
//     template: '%s - PartSoft',
//     default: 'PartSoft - Efficient Truck Parts Ordering for Shops',
//   },
//   description:
//   'Finding the right truck parts can be cumbersome. PartSoft streamlines the process, ensuring shops get what they need quickly and accurately.',
// }

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const lexend = Lexend({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-lexend',
})

export default function RootLayout({ children }) {
  const pathname = window.location.pathname

  if (pathname.startsWith('/dashboard')) {
    return <AuthLayout>{children}</AuthLayout>
  }

  return (
    <html
      lang="en"
      className={clsx(
        'h-full scroll-smooth bg-white antialiased',
        inter.variable,
        lexend.variable,
      )}
    >
      <body className="flex h-full flex-col">{children}</body>
    </html>
  )
}
I'm conditionally using the AuthLayout for those pages, and the regular layout if not on those pages. What's the best practice here?
Tufted Flycatcher
I figured it out => add a layout.jsx inside that specific folder so it can only apply to those folders