Next.js Discord

Discord Forum

Display or not a component according to the page

Unanswered
Upland Sandpiper posted this in #help-forum
Open in Discord
Upland SandpiperOP
Hello everyone.

I'm trying to display a component only on specific pages. Here is my layout file : 

import "./globals.css";
import { Inter } from "next/font/google";
import Header from "@/components/server/Header";
import Footer from "@/components/server/Footer";
import Selecteur from "@/components/client/Selecteur";
import Providers from "@/components/client/Providers";

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

export const metadata = {
  title: "Laptop Parts",
  description: "Generated by HSBU Dev",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
          <div className="max-w-screen-lg mx-auto">
            <Header />
            <main className="container mx-auto py-5 px-0">
              <div className="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
                <aside className="w-full lg:w-1/4">
                  <Selecteur />
                </aside>
                <section className="w-full lg:w-3/4">{children}</section>
              </div>
            </main>
            <Footer />
          </div>
      </body>
    </html>
  );
}


I would like to remove the "aside" part if the current page is a specific page or belongs to a certain list :

<aside className="w-full lg:w-1/4">
   <Selecteur />
</aside>


Is there any simple ay to handle it with Next JS 13 ?

Thanks for all.

0 Replies