Next.js Discord

Discord Forum

My navbar duplicating itself

Answered
Acorn-plum gall posted this in #help-forum
Open in Discord
Avatar
Acorn-plum gallOP
import Navbar from '@/components/templates/Header/Header'
import Head from 'next/head'
import Cont from '@/components/templates/Header/contnt'
function First() {
  return (
    <Head>
      <title>Buy the best paintings in Belarus</title>
      <meta charSet='UTF-8' />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width-device-width, initial-scale=1.0" />
      <link rel='icon' type='image/svg' sizes='32x32' href='/img/favicon.png' />
      <div>
        <body>
          <Navbar />
          <Cont />
        </body>
      </div>
    </Head>
  )
}

export default First
Answered by Risky
yes^ your app file has it imported, so importing it here is useless/ harmful
View full answer

137 Replies

Avatar
Alfonsus Ardani
you put a div inside head? 🤨
Avatar
Risky
is this the only import of Navbar in your code?
Avatar
Acorn-plum gallOP
im a rookie
no
i also have other
and they are the same
so what should i do, remove div from head? right?
Avatar
Risky
what about first? is that imported many times? / where is that used?
Avatar
Acorn-plum gallOP
zero
that was from tutor
Avatar
Risky
your function First isn't used anywhere?
so it isn't being used then?
Avatar
Acorn-plum gallOP
oh wait
its for routing
i know its usless
but i imported it only as a route
Avatar
dumbboy
First of all, what is First component
Avatar
Acorn-plum gallOP
Route
Avatar
dumbboy
Using 13 app dir?
Avatar
Risky
its pages dir
bc you can't import head in app dir
Avatar
dumbboy
He might be, you never know
Avatar
Acorn-plum gallOP
bruh, all code is ucked fup
Avatar
Risky
also, body inside head? idk how that goes
Avatar
dumbboy
It is, we are happy to help, if you explain a bit more
Avatar
Acorn-plum gallOP
im just really new in frontend
3 days or something
Avatar
dumbboy
Using Next.js after 3 days, not recommended, but anyways.
Can you show your project structure
Avatar
Acorn-plum gallOP
okay
Avatar
Risky
how do you start learning without using it?
Avatar
Acorn-plum gallOP
you need a screenshot right?
Avatar
dumbboy
Yeah
Avatar
Acorn-plum gallOP
Image
Avatar
Risky
whats in app btw?
Avatar
Acorn-plum gallOP
lemme seee
axios
Avatar
Risky
and where is said First function and Navbar
Avatar
Acorn-plum gallOP
First in index tsx
and navbar in components
Avatar
Risky
so you are only using First in _app.tsx?
Avatar
Acorn-plum gallOP
no
Avatar
Risky
in index.tsx?
Avatar
Acorn-plum gallOP
yes
its defined there
Avatar
dumbboy
First of all, you should not put div inside Head component, first remove that from head and put outside
Avatar
Acorn-plum gallOP
okay
got an error
it have a quickfix
Avatar
dumbboy
What's the error?
Avatar
Acorn-plum gallOP
should i wrap it into a jsx component?
Avatar
dumbboy
Yeah
Avatar
Acorn-plum gallOP
JSX expressions must have one parent element.
Avatar
Risky
i think this should work better
import Navbar from '@/components/templates/Header/Header'
import Head from 'next/head'
import Cont from '@/components/templates/Header/contnt'
function First() {
  return (
  <>
      <Head>
        <title>Buy the best paintings in Belarus</title>
        <meta charSet='UTF-8' />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width-device-width, initial-scale=1.0" />
        <link rel='icon' type='image/svg' sizes='32x32' href='/img/favicon.png' />
      </Head>
      <body>
        <Navbar />
        <Cont />
      </body>
  </>
  )
}

export default First
Avatar
dumbboy
Yeah, like that above
Avatar
Acorn-plum gallOP
okay
give me a second
Avatar
Acorn-plum gallOP
div has no closing tag
Avatar
Risky
ahh yeah, remove it
Avatar
dumbboy
Just copy and paste this
Avatar
Risky
(he was right, i forgot to remove the last div, but i just fixed)
Avatar
dumbboy
Okay, I didn'tt notice
Avatar
Acorn-plum gallOP
still have second navbar at the bottom
Avatar
dumbboy
What is in Cont component?
Avatar
Acorn-plum gallOP
content cards
Avatar
dumbboy
Would you mind sharing it?
Avatar
Acorn-plum gallOP
why not
sec
Avatar
Risky
since you use vscode, can you do a global search for navbar and first and see if it is used anywhere else
Avatar
Risky
its important tho... he should see if it is used anywhere else as its showing up in 2 places
Avatar
Acorn-plum gallOP
import React from 'react';
import Link from 'next/link';
import styles from './cntnt2.module.css';
const Cont: React.FC = () => {
    return (
        <div>
            <section className={styles.container}>
                <div className={styles.card}>
                    <div className={styles.image1}></div>
                    <h2 className={styles.h2}>О нас</h2>
                    <p className={styles.p}>Представляем вам магазин Акрилат - поставщик красок номер 1 на территории РБ, на этой странице вы можете изучить наших клиентов, отзывы и другие детали...</p>
                </div>
                <div className={styles.card}>
                    <div className={styles.image}></div>
                    <h2>Title</h2>
                    <p>Text</p>
                </div>
                <div className={styles.card}>
                    <div className={styles.image}></div>
                    <h2>Title</h2>
                    <p>Text</p>
                </div>
                <div className={styles.card}>
                    <div className={styles.image}></div>
                    <h2>Title</h2>
                    <p>Text</p>
                </div>
                <div className={styles.card}>
                    <div className={styles.image}></div>
                    <h2>Title</h2>
                    <p>Text</p>
                </div>
            </section>
        </div>
    );
};

export default Cont;
Avatar
dumbboy
Okay, can you share your _document.tsx and _app.tsx?
Avatar
Acorn-plum gallOP
.container{
    margin-top: 10%;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
.card{
    background: white;
    width:270px;
    height:400px; 
    margin: 10px;
    border-radius: 15px;
}
.h2{
    padding:5px;
    text-align: center;
}
.p{
    padding: 5px;
    text-align: center;
}

.image1{
    border-radius: 15px;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    background-image: url(./logo.png);
        height: 200px;
        margin-bottom: 15px;
        background-size: cover;
}
.card:hover{    
    transform:scale(1.05);
    cursor: pointer;
    background-color: rgb(57, 59, 59);
    color:azure;
    transition: 0.2s ease;

}
sec
Document tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
app tsx
import '@/styles/globals.css'
import React from 'react';
import Header from '../components/templates/Header/Header';
import { AppProps } from 'next/app';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <div>
      <Header />
      <Component {...pageProps} />
    </div>
  );
};

export default MyApp;
Avatar
dumbboy
Okay, since you already using header in app.tsx, you don't need to put it in your any pages.
Avatar
Risky
wrong
Avatar
dumbboy
It will automatically render at every page.
Why?
Avatar
Risky
in document, you import if from next/document so next knows where to put the head component
Avatar
dumbboy
Okay, So?
@Acorn-plum gall Did it work?
Avatar
Risky
ahh i thought you were talking about document, not app...
Avatar
Acorn-plum gallOP
wait
lilbit
Avatar
Risky
but the problem could be from header importing twice or being imported in app and the new page
That's what I said
Avatar
Acorn-plum gallOP
import Navbar from '@/components/templates/Header/Header'
import Head from 'next/head'
import Cont from '@/components/templates/Header/contnt'
function First() {
  return (
    <>
      <Head>
        <title>Buy the best paintings in Belarus</title>
        <meta charSet='UTF-8' />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width-device-width, initial-scale=1.0" />
        <link rel='icon' type='image/svg' sizes='32x32' href='/img/favicon.png' />
      </Head>
      <header>
        <body>
          <Navbar />
          <Cont />
        </body>
      </header>
    </>
  )
}

export default First
no
Avatar
Risky
(can you stop with the gifs... just wait for his reponse..)
Avatar
Acorn-plum gallOP
or maybe im just stupid
Avatar
Risky
header inside body...
Avatar
dumbboy
Don't add Navbar Again in your FIrst component
Avatar
Risky
yes^ your app file has it imported, so importing it here is useless/ harmful
Answer
Avatar
Acorn-plum gallOP
how i added it again?
Avatar
dumbboy
You are importing it and using in body again.
Image
Don't use it
Avatar
Acorn-plum gallOP
oh so
its placing itself without me typing <Navbar/>????
Avatar
Risky
you have imported it twice
Avatar
dumbboy
Yeah, everyting you place at app.tsx, renders at each page
Avatar
Acorn-plum gallOP
ye i got it
Avatar
Risky
one in app and other in that component
Avatar
Acorn-plum gallOP
oh
so im just a dumb idiot who should just import it in the app tsx
Avatar
Risky
the component already has the code from app, so you don't need to import twice
Avatar
dumbboy
Not idiot, more like new
Anyways, is your problem solved?
Avatar
Acorn-plum gallOP
bruh
wait pls
Image
its not duplicating anymore
but i have this error now
Avatar
dumbboy
You don't use body inside header, and don't use body in pages
No need to write body tag
Just write your code
Avatar
Acorn-plum gallOP
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES
FINALLY
Avatar
dumbboy
Congrats
Avatar
Risky
even i am confused on what you mean by this?
but it works so 🎉
Avatar
Acorn-plum gallOP
EVERY GOD IN THE WORLD BLESS GUYS
Avatar
dumbboy
And please select the message that helped you and mark it as solution.
I'm not forcing to do it for my message BTW
Avatar
Acorn-plum gallOP
wait
Avatar
dumbboy
Edited the message, I typed in hurry
Avatar
Acorn-plum gallOP
how to chose it:mild_panic:
Avatar
dumbboy
hover on message, click on the three dots, apps -> mark as solution
Avatar
Acorn-plum gallOP
oh i didnt seen that
ill try again
thanks again guys
im closing it