Next.js Discord

Discord Forum

My navbar duplicating itself

Answered
Acorn-plum gall posted this in #help-forum
Open in Discord
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

you put a div inside head? 🤨
is this the only import of Navbar in your code?
Acorn-plum gallOP
im a rookie
no
i also have other
and they are the same
@alfonsus you put a div inside head? 🤨
Acorn-plum gallOP
so what should i do, remove div from head? right?
what about first? is that imported many times? / where is that used?
Acorn-plum gallOP
zero
that was from tutor
your function First isn't used anywhere?
so it isn't being used then?
Acorn-plum gallOP
oh wait
its for routing
i know its usless
but i imported it only as a route
First of all, what is First component
Acorn-plum gallOP
Route
@Acorn-plum gall Route
Using 13 app dir?
its pages dir
bc you can't import head in app dir
@risky bc you can't import head in app dir
He might be, you never know
Acorn-plum gallOP
bruh, all code is ucked fup
also, body inside head? idk how that goes
@Acorn-plum gall bruh, all code is ucked fup
It is, we are happy to help, if you explain a bit more
Acorn-plum gallOP
im just really new in frontend
3 days or something
@Acorn-plum gall 3 days or something
Using Next.js after 3 days, not recommended, but anyways.
Can you show your project structure
Acorn-plum gallOP
okay
@dumbboy Using Next.js after 3 days, not recommended, but anyways.
how do you start learning without using it?
Acorn-plum gallOP
you need a screenshot right?
Acorn-plum gallOP
whats in app btw?
Acorn-plum gallOP
lemme seee
axios
and where is said First function and Navbar
Acorn-plum gallOP
First in index tsx
and navbar in components
so you are only using First in _app.tsx?
Acorn-plum gallOP
no
in index.tsx?
Acorn-plum gallOP
yes
its defined there
First of all, you should not put div inside Head component, first remove that from head and put outside
Acorn-plum gallOP
okay
got an error
it have a quickfix
@Acorn-plum gall got an error
What's the error?
Acorn-plum gallOP
should i wrap it into a jsx component?
Acorn-plum gallOP
JSX expressions must have one parent element.
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
Yeah, like that above
Acorn-plum gallOP
okay
give me a second
Acorn-plum gallOP
div has no closing tag
ahh yeah, remove it
(he was right, i forgot to remove the last div, but i just fixed)
Acorn-plum gallOP
still have second navbar at the bottom
@Acorn-plum gall still have second navbar at the bottom
What is in Cont component?
Acorn-plum gallOP
content cards
@Acorn-plum gall content cards
Would you mind sharing it?
Acorn-plum gallOP
why not
sec
since you use vscode, can you do a global search for navbar and first and see if it is used anywhere else
its important tho... he should see if it is used anywhere else as its showing up in 2 places
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;
Okay, can you share your _document.tsx and _app.tsx?
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;
wrong
It will automatically render at every page.
@risky wrong
Why?
in document, you import if from next/document so next knows where to put the head component
@Acorn-plum gall Did it work?
ahh i thought you were talking about document, not app...
Acorn-plum gallOP
wait
lilbit
but the problem could be from header importing twice or being imported in app and the new page
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
(can you stop with the gifs... just wait for his reponse..)
Acorn-plum gallOP
or maybe im just stupid
yes^ your app file has it imported, so importing it here is useless/ harmful
Answer
@dumbboy Don't add Navbar Again in your FIrst component
Acorn-plum gallOP
how i added it again?
You are importing it and using in body again.
Don't use it
Acorn-plum gallOP
oh so
its placing itself without me typing <Navbar/>????
you have imported it twice
@Acorn-plum gall its placing itself without me typing <Navbar/>????
Yeah, everyting you place at app.tsx, renders at each page
Acorn-plum gallOP
ye i got it
one in app and other in that component
Acorn-plum gallOP
oh
so im just a dumb idiot who should just import it in the app tsx
the component already has the code from app, so you don't need to import twice
@Acorn-plum gall oh
Not idiot, more like new
Anyways, is your problem solved?
Acorn-plum gallOP
bruh
wait pls
its not duplicating anymore
but i have this error now
@Acorn-plum gall Click to see attachment
You don't use body inside header, and don't use body in pages
No need to write body tag
Just write your code
Acorn-plum gallOP
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES
FINALLY
@Acorn-plum gall FINALLY
Congrats
@dumbboy You don't use body inside header, and don't use body in pages
even i am confused on what you mean by this?
but it works so 🎉
Acorn-plum gallOP
EVERY GOD IN THE WORLD BLESS GUYS
And please select the message that helped you and mark it as solution.
I'm not forcing to do it for my message BTW
Acorn-plum gallOP
wait
@risky even i am confused on what you mean by this?
Edited the message, I typed in hurry
Acorn-plum gallOP
how to chose it:mild_panic:
hover on message, click on the three dots, apps -> mark as solution
Acorn-plum gallOP
oh i didnt seen that
ill try again
thanks again guys
im closing it