Next.js Discord

Discord Forum

How to create landing page and dashboard on same root / route?

Answered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
If user is logged in then dashboard will be shown, otherwise landing page will be shown. Both will be on same root / route.
Answered by Spectacled Caiman
I have now done it using next js parallel routes

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "@/components/ui/toaster";
import { auth } from "@clerk/nextjs/server";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  app,
  landing,
}: Readonly<{
  children: React.ReactNode;
  app: React.ReactNode;
  landing: React.ReactNode;
}>) {

  const { userId }: { userId: string | null } = auth()

  return (
    <ClerkProvider>
      <html lang="en">
        <body className={cn("min-h-screen", inter.className)}>
          {userId ? app : landing}
          <Toaster />
        </body>
      </html>
    </ClerkProvider>
  );
}
View full answer

17 Replies

Spectacled CaimanOP
I want to use a approach that will allow me to use different layouts as well.
(landing)
- page.tsx
- layout.tsx
(dashboard)
- page.tsx
- layout.tsx


Like this structure.
James4u
Well, I think it's better to have components for dashboard/landing page. and return <Landing /> or <Dashboard /> depending on the condition in /page.tsx
@Spectacled Caiman If user is logged in then dashboard will be shown, otherwise landing page will be shown. Both will be on same root / route.
joulev
dashboard at /dashboard
landing page at /home
use middleware to rewrite to landing page or dashboard depending on auth data
@joulev dashboard at `/dashboard` landing page at `/home` use middleware to rewrite to landing page or dashboard depending on auth data
James4u
How to create landing page and dashboard on same root / route?
I think OP doesn't want to have different route for both dashboard and home
@James4u `How to create landing page and dashboard on same root / route?` I think OP doesn't want to have different route for both dashboard and home
joulev
bad idea to have the landing page being dynamically rendered though, don't you think?

rewriting from / to /home is a very popular concept. see:
* https://vercel.com/home
* https://github.com/home

vercel and github don't actually have their landing page dynamically rendered based on user authentication information
maybe he has some story behind it
joulev
while your answer is correct for the literal intepretation of the OP's question, they most likely want to replicate vercel's behaviour in that case the /home trick is superior. let's see what the OP thinks
the landing page is the most performance-critical page. you don't want to have a dynamically rendered route in there. you would want SSG in there
@James4u True! Never had landing page and dashboard in the same route but as OP asked 🤣
Spectacled CaimanOP
Github also has landing page and dashboard on same route.
James4u
oh, you are right lol
@James4u go this way then!
Spectacled CaimanOP
I have now done it using next js parallel routes

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "@/components/ui/toaster";
import { auth } from "@clerk/nextjs/server";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  app,
  landing,
}: Readonly<{
  children: React.ReactNode;
  app: React.ReactNode;
  landing: React.ReactNode;
}>) {

  const { userId }: { userId: string | null } = auth()

  return (
    <ClerkProvider>
      <html lang="en">
        <body className={cn("min-h-screen", inter.className)}>
          {userId ? app : landing}
          <Toaster />
        </body>
      </html>
    </ClerkProvider>
  );
}
Answer
Spectacled CaimanOP
This is now folder structure
@Spectacled Caiman Github also has landing page and dashboard on same route.
joulev
Yes and if you go to github.com/home and github.com/dashboard you will see that they actually manage two different routes and use the rewrite trick. They don’t maintain a page at /.