Next.js Discord

Discord Forum

Navbar gets rendered twice in prod without reactstrictmode

Unanswered
Arboreal ant posted this in #help-forum
Open in Discord
Arboreal antOP
So i added a console log in the navbar component and i noticed it was getting rendered twice on page switch or reload, i found out that the cause was not-found.js even tho the user isnt even on that page, when i removed the navbar from that page it stopped getting rendered twice but is there another solution so i can keep the navbar on my 404 page? and no i cant put it in the layout file as i dont want it on all pages and i don't want to use routing groups, i just import the navbar where i want it to show up

36 Replies

Arboreal antOP
bump
Arboreal antOP
i added a console log to the not found page and it logged everytime i reloaded any other page, why is the notfound page triggered on every other page?
"use php"
Can you inspect & check the page once, and send screenshot, and send your code
screenshot of web page***
@"use php" screenshot of web page***
Arboreal antOP
the problem is that the 404 page always runs i went to my homepage and as the homepage and the 404 have the navbar it got triggered twice, i added a console log 404 page and you can see it in the screenshot even tho im on the home page 
// not-found.js
import NavBar from "./components/NavBar";


export default async function NotFound() {


  console.log('404 page')

  return (
   <> 
    <NavBar/>
    <div className="flex flex-col justify-center items-center w-full text-center  ">
      <h1 className="font-bold text-6xl">404 - Not Found</h1>
    </div>
    </>
  );
}
Arboreal antOP
bump
Arboreal antOP
bump
Sun bear
I would first remove the async from the NotFound() but thats not the problem.

Can you check if you load any resource that causes a 404? E.g loading an image with wrong source or anything like that? Maybe its just triggert.

And is the console log in navbar really just one time when you remove it from NotFound()?

Next.js dev mode is rendering twice in dev mode anyway. So maybe it will log twice anyway
@Sun bear I would first remove the `async` from the NotFound() but thats not the problem. Can you check if you load any resource that causes a 404? E.g loading an image with wrong source or anything like that? Maybe its just triggert. And is the console log in navbar really just one time when you remove it from NotFound()? Next.js dev mode is rendering twice in dev mode anyway. So maybe it will log twice anyway
Arboreal antOP
so i console logged 404 as well and it logs every time i go to any page that also makes the navbar go off twice if the page that i went to has a navbar, this also happens in prod so, i couldnt find anything that could result in a 404 and this happens on every page
i even removed everything from the homepage so im not importing anything that can cause a 404 and it still console logs
and this is my layout.js 
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });





export default function RootLayout({ children, req }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}
@Sun bear Can you share the navbar conponent pls?
Arboreal antOP
import React from "react";
import { headers } from "next/headers";
import { getUser } from "@/app/utilities/getUser";
import { cookies } from "next/headers";
import NavbarButton from "./navbarButton";
import Link from "next/link";
import isdev from "isdev";

export const dynamic = "force-dynamic";

const NavBar = async ({}) => {
  const cookieStore = cookies();
  const sessionid = cookieStore.get("sessionid");

  const pathname = headers().get("my-url");
  const user = await getUser(sessionid);

  console.log('navbar')

  const oauthUrl = isdev
    ? process.env.NEXT_PUBLIC_DEV_OAUTH_URL
    : process.env.NEXT_PUBLIC_OAUTH_URL;

  return (
    <nav className="flex justify-between bg-gray-900 items-center px-[10%] py-12 md:px-10 md:py-7 w-full text-[white]  ">
      <h1 className="z-30">APP</h1>
      <div className="flex justify-center items-center md:items-start md:justify-normal md:bg-neutral-900 md:absolute md:pt-20 md:top-0 md:min-h-full md:w-full md:duration-300 md:left-[-100%] md:flex-col" id="navbar">
        <a href="/" className="ml-8 text-[white] no-underline">
          Home
        </a>
        <a href="/dashboard" className="ml-8 text-[white] no-underlinek">
          Dashboard
        </a>
        {user && user.username ? (
          <div className="flex md:absolute md:bottom-8 items-center ml-8">
            <img
              src={user.avatar}
              alt="Profile"
              className="w-[30px] h-[30px] rounded-[50%]"
            />
            <p className="ml-2">{user.username}</p>
          </div>
        ) : (
          <a
            href={`${
              oauthUrl  
            }&state=${encodeURIComponent(pathname)}`}
            className="inline-block ml-8 px-5 py-2 bg-neutral-800 text-black font-semibold rounded-md hover:bg-gray-300 transition duration-3"
          >
            Login
          </a>
        )}
      </div>
      <NavbarButton user={user} /> 
    </nav>
  );
};

export default NavBar;
"use php"
@Arboreal ant Can you create a [min repro repo](https://nextjs-faq.com/minimal-reproduction-repository)
@Arboreal ant js import React from "react"; import { headers } from "next/headers"; import { getUser } from "@/app/utilities/getUser"; import { cookies } from "next/headers"; import NavbarButton from "./navbarButton"; import Link from "next/link"; import isdev from "isdev"; export const dynamic = "force-dynamic"; const NavBar = async ({}) => { const cookieStore = cookies(); const sessionid = cookieStore.get("sessionid"); const pathname = headers().get("my-url"); const user = await getUser(sessionid); console.log('navbar') const oauthUrl = isdev ? process.env.NEXT_PUBLIC_DEV_OAUTH_URL : process.env.NEXT_PUBLIC_OAUTH_URL; return ( <nav className="flex justify-between bg-gray-900 items-center px-[10%] py-12 md:px-10 md:py-7 w-full text-[white] "> <h1 className="z-30">APP</h1> <div className="flex justify-center items-center md:items-start md:justify-normal md:bg-neutral-900 md:absolute md:pt-20 md:top-0 md:min-h-full md:w-full md:duration-300 md:left-[-100%] md:flex-col" id="navbar"> <a href="/" className="ml-8 text-[white] no-underline"> Home </a> <a href="/dashboard" className="ml-8 text-[white] no-underlinek"> Dashboard </a> {user && user.username ? ( <div className="flex md:absolute md:bottom-8 items-center ml-8"> <img src={user.avatar} alt="Profile" className="w-[30px] h-[30px] rounded-[50%]" /> <p className="ml-2">{user.username}</p> </div> ) : ( <a href={`${ oauthUrl }&state=${encodeURIComponent(pathname)}`} className="inline-block ml-8 px-5 py-2 bg-neutral-800 text-black font-semibold rounded-md hover:bg-gray-300 transition duration-3" > Login </a> )} </div> <NavbarButton user={user} /> </nav> ); }; export default NavBar;
"use php"
and a personal opinion. instead of using the package isdev, you can just use if condition
const isDev = NODE_ENV !== "production"
Is the only issue thats navbar is getting printed twice?
and 404 is getting printed?
"use php"
I recommend creating a issue in nextjs github
@"use php" how to reproduce the issue
Arboreal antOP
i didnt do anything for that to happen, the issue happend on the mini repo i sent, did it not happen for you? the problem is that 404 gets logged on EVERY page even tho there is nothing 404 on that page
"use php"
yes
@"use php" thats why, create a issue on nextjs discord
Arboreal antOP
yeah but dont know how to reproduce it
@Arboreal ant yeah but dont know how to reproduce it
"use php"
Just give the git repo
@"use php" Just give the git repo
Arboreal antOP
yes but in the repo i sent you saw the issue right?
"use php"
yes
Arboreal antOP
https://github.com/vercel/next.js/issues/67532
Arboreal antOP
Yeah I'm not sure what's wrong at this point, it should work fine but it doesn't so I guess il just remove the navbar from the 404 page
"use php"
@Arboreal ant did you find any solution about 404 page executing on every request?
still happens, kinda gave up
Arboreal antOP
same on the lateest version