My navbar duplicating itself

Answered

Acorn-plum gall posted this in #help-forum

Acorn-plum gallOP

2023-09-14T13:46:25.000Z

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

Alfonsus Ardani

2023-09-14T13:47:20.000Z

you put a div inside head? ðŸ¤¨

risky

2023-09-14T13:47:34.000Z

is this the only import of Navbar in your code?

Acorn-plum gallOP

2023-09-14T13:47:39.000Z

im a rookie

i also have other

and they are the same

so what should i do, remove div from head? right?

risky

2023-09-14T13:48:31.000Z

what about first? is that imported many times? / where is that used?

Acorn-plum gallOP

2023-09-14T13:48:39.000Z

zero

that was from tutor

risky

2023-09-14T13:49:02.000Z

your function First isn't used anywhere?

so it isn't being used then?

Acorn-plum gallOP

2023-09-14T13:49:10.000Z

oh wait

its for routing

i know its usless

but i imported it only as a route

dumbboy

2023-09-14T13:50:05.000Z

First of all, what is First component

Acorn-plum gallOP

2023-09-14T13:50:25.000Z

Route

dumbboy

2023-09-14T13:50:42.000Z

Using 13 app dir?

risky

2023-09-14T13:50:49.000Z

its pages dir

bc you can't import head in app dir

dumbboy

2023-09-14T13:51:09.000Z

He might be, you never know

Acorn-plum gallOP

2023-09-14T13:51:24.000Z

bruh, all code is ucked fup

risky

2023-09-14T13:51:37.000Z

also, body inside head? idk how that goes

dumbboy

2023-09-14T13:51:42.000Z

It is, we are happy to help, if you explain a bit more

Acorn-plum gallOP

2023-09-14T13:51:43.000Z

im just really new in frontend

3 days or something

dumbboy

2023-09-14T13:52:17.000Z

Using Next.js after 3 days, not recommended, but anyways.

Can you show your project structure

Acorn-plum gallOP

2023-09-14T13:52:32.000Z

okay

risky

2023-09-14T13:53:00.000Z

how do you start learning without using it?

Acorn-plum gallOP

2023-09-14T13:53:05.000Z

you need a screenshot right?

dumbboy

2023-09-14T13:53:10.000Z

Yeah

Acorn-plum gallOP

2023-09-14T13:53:43.000Z

risky

2023-09-14T13:53:58.000Z

whats in app btw?

Acorn-plum gallOP

2023-09-14T13:54:06.000Z

lemme seee

axios

risky

2023-09-14T13:54:14.000Z

and where is said First function and Navbar

Acorn-plum gallOP

2023-09-14T13:54:30.000Z

First in index tsx

and navbar in components

risky

2023-09-14T13:54:41.000Z

so you are only using First in _app.tsx?

Acorn-plum gallOP

2023-09-14T13:54:59.000Z

risky

2023-09-14T13:55:06.000Z

in index.tsx?

Acorn-plum gallOP

2023-09-14T13:55:09.000Z

yes

its defined there

dumbboy

2023-09-14T13:55:30.000Z

First of all, you should not put div inside Head component, first remove that from head and put outside

Acorn-plum gallOP

2023-09-14T13:55:42.000Z

okay

got an error

it have a quickfix

dumbboy

2023-09-14T13:56:38.000Z

What's the error?

Acorn-plum gallOP

2023-09-14T13:56:40.000Z

should i wrap it into a jsx component?

dumbboy

2023-09-14T13:56:47.000Z

Yeah

Acorn-plum gallOP

2023-09-14T13:56:51.000Z

JSX expressions must have one parent element.

risky

2023-09-14T13:57:13.000Z

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

dumbboy

2023-09-14T13:57:24.000Z

Yeah, like that above

Acorn-plum gallOP

2023-09-14T13:57:31.000Z

okay

give me a second

dumbboy

2023-09-14T13:57:50.000Z

https://tenor.com/view/take-a-second-wait-hold-up-think-about-it-hold-on-gif-17180124

Acorn-plum gallOP

2023-09-14T13:58:31.000Z

div has no closing tag

risky

2023-09-14T13:59:01.000Z

ahh yeah, remove it

dumbboy

2023-09-14T13:59:01.000Z

Just copy and paste this

risky

2023-09-14T13:59:19.000Z

(he was right, i forgot to remove the last div, but i just fixed)

dumbboy

2023-09-14T13:59:29.000Z

Okay, I didn'tt notice

Acorn-plum gallOP

2023-09-14T13:59:36.000Z

still have second navbar at the bottom

dumbboy

2023-09-14T13:59:51.000Z

What is in Cont component?

Acorn-plum gallOP

2023-09-14T14:00:00.000Z

content cards

dumbboy

2023-09-14T14:00:12.000Z

Would you mind sharing it?

Acorn-plum gallOP

2023-09-14T14:00:20.000Z

why not

sec

risky

2023-09-14T14:00:28.000Z

since you use vscode, can you do a global search for navbar and first and see if it is used anywhere else

dumbboy

2023-09-14T14:00:52.000Z

https://tenor.com/view/lets-not-make-this-any-more-confusing-than-it-already-is-wendy-testaburger-kyle-broflovski-south-park-s9e10-gif-22283282

risky

2023-09-14T14:01:16.000Z

its important tho... he should see if it is used anywhere else as its showing up in 2 places

Acorn-plum gallOP

2023-09-14T14:01:22.000Z

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;

dumbboy

2023-09-14T14:01:37.000Z

Okay, can you share your _document.tsx and _app.tsx?

Acorn-plum gallOP

2023-09-14T14:01:43.000Z

.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;

dumbboy

2023-09-14T14:03:15.000Z

Okay, since you already using header in app.tsx, you don't need to put it in your any pages.

risky

2023-09-14T14:03:23.000Z

wrong

dumbboy

2023-09-14T14:03:26.000Z

It will automatically render at every page.

Why?

risky

2023-09-14T14:03:50.000Z

in document, you import if from next/document so next knows where to put the head component

dumbboy

2023-09-14T14:04:09.000Z

Okay, So?

@Acorn-plum gall Did it work?

risky

2023-09-14T14:04:55.000Z

ahh i thought you were talking about document, not app...

Acorn-plum gallOP

2023-09-14T14:05:04.000Z

wait

lilbit

risky

2023-09-14T14:05:16.000Z

but the problem could be from header importing twice or being imported in app and the new page

dumbboy

2023-09-14T14:05:23.000Z

https://tenor.com/view/just-a-little-bit-a-little-piece-small-tiny-bit-just-this-little-gif-14958009

That's what I said

Acorn-plum gallOP

2023-09-14T14:05:52.000Z

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

risky

2023-09-14T14:05:56.000Z

(can you stop with the gifs... just wait for his reponse..)

Acorn-plum gallOP

2023-09-14T14:06:15.000Z

or maybe im just stupid

risky

2023-09-14T14:06:19.000Z

header inside body...

dumbboy

2023-09-14T14:06:23.000Z

Don't add Navbar Again in your FIrst component

risky

2023-09-14T14:06:50.000Z

yes^ your app file has it imported, so importing it here is useless/ harmful

Answer

Acorn-plum gallOP

2023-09-14T14:06:53.000Z

how i added it again?

dumbboy

2023-09-14T14:07:43.000Z

You are importing it and using in body again.

Don't use it

Acorn-plum gallOP

2023-09-14T14:08:01.000Z

oh so

its placing itself without me typing <Navbar/>????

risky

2023-09-14T14:08:33.000Z

you have imported it twice

dumbboy

2023-09-14T14:08:39.000Z

Yeah, everyting you place at app.tsx, renders at each page

Acorn-plum gallOP

2023-09-14T14:08:40.000Z

ye i got it

risky

2023-09-14T14:08:40.000Z

one in app and other in that component

Acorn-plum gallOP

2023-09-14T14:08:47.000Z

so im just a dumb idiot who should just import it in the app tsx

risky

2023-09-14T14:09:06.000Z

the component already has the code from app, so you don't need to import twice

dumbboy

2023-09-14T14:09:19.000Z

Not idiot, more like new

Anyways, is your problem solved?

Acorn-plum gallOP

2023-09-14T14:10:28.000Z

bruh

wait pls

its not duplicating anymore

but i have this error now

dumbboy

2023-09-14T14:11:40.000Z

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

2023-09-14T14:12:30.000Z

YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEES

FINALLY

dumbboy

2023-09-14T14:12:41.000Z

Congrats

risky

2023-09-14T14:12:46.000Z

even i am confused on what you mean by this?

but it works so ðŸŽ‰

Acorn-plum gallOP

2023-09-14T14:12:59.000Z

EVERY GOD IN THE WORLD BLESS GUYS

dumbboy

2023-09-14T14:13:11.000Z

And please select the message that helped you and mark it as solution.

https://tenor.com/view/firearm-ill-shoot-you-head-shot-gunman-frightened-gif-13704419

I'm not forcing to do it for my message BTW

Acorn-plum gallOP

2023-09-14T14:13:52.000Z

wait

dumbboy

2023-09-14T14:14:08.000Z

Edited the message, I typed in hurry

Acorn-plum gallOP

2023-09-14T14:15:14.000Z

how to chose it

dumbboy

2023-09-14T14:15:46.000Z

hover on message, click on the three dots, apps -> mark as solution

Acorn-plum gallOP

2023-09-14T14:16:01.000Z

oh i didnt seen that

ill try again

thanks again guys

im closing it