Next.js Discord

Discord Forum

Template Duplication

Answered
Nomblydoom posted this in #help-forum
Open in Discord
NomblydoomOP
How do you make it in the template that React Elements don't duplicate seen in the image attached:

here is what my template.tsx looks like:
'use client'

import { motion , AnimatePresence} from "framer-motion"
import { usePathname } from "next/navigation";
import { useMenuContext } from "@/contexts/MenuContext";
import AuroraHero from "@/components/home/Aurora";
import { useAuroraContext } from "@/contexts/AuroraContext";
import React from "react";

export default function Template( props:{children : React.ReactNode} ) {
    const{menuIsOpen} = useMenuContext();
    const{AuroraOn} = useAuroraContext();
    const pathname = usePathname();
    return (
      <>
          <AnimatePresence mode="wait">
          {!menuIsOpen &&(
          <motion.div
              id={"WA"}
          key={pathname}
           className="w-full h-full flex"
            initial={{opacity:0, y: -20}}
            animate={{opacity:1, y: 0}}
            exit={{opacity:0, y: -20}} 
            transition= {{ease: "easeInOut", staggerChildren: 1, duration:0.5, type:'tween'}}
            >
              {props.children}
              <AuroraHero className={`${AuroraOn ? "block" : "hidden"}`}/>
        </motion.div>
          )}

      </AnimatePresence>
      </>

);
}


(I am using App Routes)
Answered by joulev
yes. do not import the template there. don't use the template inside the layout, nextjs will automatically do it for you correctly
View full answer

7 Replies

did you import the template into the layout or something like that?
NomblydoomOP
yes (layout.tsx)
return (
        <html lang="en" suppressHydrationWarning>
        <body className={`${inter.variable} ${anybody.variable} ${jakarta.variable} h-svh bg-background dark:bg-backgroundDark`}
              style={{WebkitOverflowScrolling: 'auto'}}
              >
               <PageLoading/> 
        <Providers>
            <UserInterface/>
             <main className={" text-primary dark:text-primaryDark w-full h-full flex justify-center items-center "}>
                <Template>
                    {children}
                </Template>
            </main>
        </Providers>
 
        </body>
        </html>
    );
am I suppose to do it in different way?
@Nomblydoom am I suppose to do it in different way?
joulev
yes. do not import the template there. don't use the template inside the layout, nextjs will automatically do it for you correctly
Answer
NomblydoomOP
Ah, I feel stupid I should've read more clearly thank you for your assistance!

seeing this documentation I wrongfully assumed the opposite
@Nomblydoom Ah, I feel stupid I should've read more clearly thank you for your assistance! seeing this documentation I wrongfully assumed the opposite
joulev
oh yeah that one is quite confusing. it's supposed to show how nextjs renders things behind the scenes but yeah can totally see how people can get misled by that