Duplicated render components

Answered

Sun bear posted this in #help-forum

Sun bearOP

2024-03-20T07:16:20.000Z

Hello Everyone, my name is Rian and just learn NextJS here ðŸ™

I'm encountering a problem where the <header> and <main> tags are duplicating during navigation. In this case, I've set up my layout.jsx to enable the use of different header variants on each page. The duplication issue occurs as follows: when I first load the /berita page, the structure is rendered correctly as:

<body>
  <header>
  </header>
  <main>
  </main>
</body>

However, when I navigate to the home page and then return to the /berita page, the structure becomes incorrectly nested like this:

<body>
  <header>
  </header>
  <main>
    <header> <!-- This is the duplicated header -->
    </header>
    <main> <!-- This is the duplicated main -->
    </main>
  </main>
</body>

Answered by Ray

next will wrap the page.jsx with layout.jsx automatically

View full answer

99 Replies

averydelusionalperson

2024-03-20T07:33:41.000Z

If I'm not wrong if you have a root layout & another layout in route groups. the grouped route layout get nested inside the original layout.

@averydelusionalperson If I'm not wrong if you have a root layout & another layout in route groups. the grouped route layout get nested inside the original layout.

Sun bearOP

2024-03-20T07:36:19.000Z

In my use case, I want to use a header variant on each specific page, that's why I'm not render the <header> and <main> on root layout.jsx instead I put it on layout.jsx on each route

is there anyway to avoid these duplicate issue?

averydelusionalperson

2024-03-20T07:37:11.000Z

you can remove root layout file and place layout file in multiple route groups

That's how I do it

I've something like this for my website, gonna add dashboard soon too, and it will have different layout

Note: I don't have root layout file in app dir

@averydelusionalperson I've something like this for my website, gonna add dashboard soon too, and it will have different layout

Sun bearOP

2024-03-20T07:41:03.000Z

So, in that way we need to repeat an import things and return the html & body?

averydelusionalperson

2024-03-20T07:41:30.000Z

You can do something like this: https://stackoverflow.com/a/75971801

Do all imports and that stuff in root layout

but only have body & html in root layout

and add headers, footers, navbars, etc for each respective page/route group

@averydelusionalperson Do all imports and that stuff in root layout

Sun bearOP

2024-03-20T07:42:55.000Z

Do you mean the root layout inside the (routes) folder? not app folder right?

averydelusionalperson

2024-03-20T07:43:37.000Z

app one?

I mean the app folder

either way, child is gonna inherit parent's layout If I'm not wrong, so don't add body & html in each one IG

Sun bearOP

2024-03-20T07:46:10.000Z

this is my current structure

app/layout.jsx

averydelusionalperson

2024-03-20T07:46:45.000Z

hmm, so you want footer in each page?

@averydelusionalperson hmm, so you want footer in each page?

Sun bearOP

2024-03-20T07:47:00.000Z

yes, the footer will be same on all pages

averydelusionalperson

2024-03-20T07:47:07.000Z

okay sounds good

Sun bearOP

2024-03-20T07:47:10.000Z

the different is the header

that's why, I'm using layout.jsx on each route and put the <Header variant>

but, the issue is my <header> and <main> is rendered twice during navigating

averydelusionalperson

2024-03-20T07:48:21.000Z

what about header, you want in some routes, and don't want in some?

@averydelusionalperson what about header, you want in some routes, and don't want in some?

Sun bearOP

2024-03-20T07:48:51.000Z

the header will be on all routes, but with some variants

averydelusionalperson

2024-03-20T07:49:08.000Z

so you pass the variant prop?

Sun bearOP

2024-03-20T07:49:14.000Z

this is my layout.jsx from /berita route

import Header from "../../../components/header";

const BeritaLayout = ({children}) => {
    return (
        <>
            <Header />
            <main>
                {children}
            </main>
        </>
    )
}

export default BeritaLayout

and this is layout.jsx from another route

import Header from "../../../../components/header";

const BeritaDetailLayout = ({children}) => {
    return (
        <>
            <Header variant="seamless-light" />
            <main>
                {children}
            </main>
        </>
    )
}

export default BeritaDetailLayout

@averydelusionalperson so you pass the variant prop?

Sun bearOP

2024-03-20T07:49:40.000Z

yes

averydelusionalperson

2024-03-20T07:50:00.000Z

both look good, so what's the problem? those routes aren't nested right?

@averydelusionalperson both look good, so what's the problem? those routes aren't nested right?

Sun bearOP

2024-03-20T07:50:37.000Z

this is the problem

especially during navigating to another route

averydelusionalperson

2024-03-20T07:50:58.000Z

are those two routes on same level or nested?

@averydelusionalperson are those two routes on same level or nested?

Sun bearOP

2024-03-20T07:51:39.000Z

a moment, I'll give you a sample video

averydelusionalperson

2024-03-20T07:51:49.000Z

ðŸ‘

imma have my lunch

later

cya

Sun bearOP

2024-03-20T07:52:27.000Z

yupss, enjoy your lunch

https://monosnap.com/file/PAEXDNgYmuqOTELdUjdWpQWcpFlbh6

averydelusionalperson

2024-03-20T07:53:28.000Z

Ray to the rescue ðŸ‘€

@Sun bear https://monosnap.com/file/PAEXDNgYmuqOTELdUjdWpQWcpFlbh6

Sun bearOP

2024-03-20T07:54:02.000Z

1. First load, the components rendered correcly
2. goes to /berita route, components duplicated one time
3. goes to /berita/kolaborasi (dynamic route with slug param), components rendered twice