"npm run dev" displays a 404 page for all routes?

[akhandafm17]

Summary

I'm encountering an issue where running npm run dev displays a 404 page for all routes in my Next.js 13 application. I suspect the problem originated when I was clicking on the sign-out button for the first time after adding the feature using next-auth. Interestingly, the terminal doesn't provide any errors, leaving me puzzled about the root cause.

To troubleshoot, I've tried the following:

Running npm run build && npm start and just npm start, but the problem persists.
Deleting the .next folder and running npm install again, but this didn't resolve the issue either.

this is the code of my navbar

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSession } from "next-auth/react";
import { UserNav } from "./usernav";


export default function Navbar() {
  const pathname = usePathname();
  const { data: session } = useSession();
  const userImage = session?.user?.image;
  if (pathname !== "/auth") {
    return (
      <>
        <nav className="bg-transparent">
          <div className="max-w-screen-xl flex items-center justify-between mx-auto py-1">
            <a href="/" className="flex items-center">
              <img
                src="/pump_plates_logo.png"
                className="object-cover h-32 w-64"
                alt="PumpPlate Logo"
              ></img>
            </a>

            <button
              data-collapse-toggle="navbar-solid-bg"
              type="button"
              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
              aria-controls="navbar-solid-bg"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              <svg
                className="w-5 h-5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 17 14"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M1 1h15M1 7h15M1 13h15"
                />
              </svg>
            </button>
            <div
              className="hidden w-full md:block md:w-auto"
              id="navbar-solid-bg"
            >
              <ul className="flex flex-col font-medium mt-1 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 md:dark:bg-transparent dark:border-gray-700">
                <li>
                  <Link
                    href="/"
                    className="block py-1 pl-2 pr-3 text-black rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
                    aria-current="page"
                  >
                    Home
                  </Link>
                </li>
                <li>
                  <Link
                    href="/about"
                    className="block py-1 pl-2 pr-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-black md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    About
                  </Link>
                </li>
                <li>
                  <Link
                    href="/pricing"
                    className="block py-1 pl-2 pr-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-black md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    Pricing
                  </Link>
                </li>
                <li className="mr-12">
                  <Link
                    href="/contact"
                    className="block py-1 pl-2 pr-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-black md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
                  >
                    Contact
                  </Link>
                </li>
                <li className="relative">
                  <UserNav/>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </>
    );
  }
}

and in this code, I have put a sign-out button.

import {
    Avatar,
    AvatarFallback,
    AvatarImage,
  } from "@/components/ui/avatar"
  import { Button } from "@/components/ui/button"
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuTrigger,
  } from "@/components/ui/dropdown-menu"
  import { useSession } from "next-auth/react";
  import { signOut } from "next-auth/react"
  import { useRouter } from 'next/navigation'
  
  export function UserNav() {
  const { data: session } = useSession();
  const userImage = session?.user?.image;
  const username = session?.user?.name;
  const useremail = session?.user?.email;
  const router = useRouter();

  function handleItemClick(event: any) {
    const itemLabel = event.target.textContent;
    switch (itemLabel) {
      case "Profile":
        console.log("Profile clicked");
        router.push('/profile');
        break;
      case "Billing":
        console.log("Billing clicked");
        router.push('/billing');
        break;
      case "Settings":
        console.log("Settings clicked");
        router.push('/settings');
        break;
      case "Log out":
        console.log("Log out clicked");
        signOut();
        break;
      default:
        break;
    }
  };
    
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="relative h-8 w-8 rounded-full">
            <Avatar className="h-8 w-8">
              <AvatarImage src={userImage as string} alt="user profile" />
              <AvatarFallback>SC</AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56 bg-black" align="end" forceMount>
          <DropdownMenuLabel className="font-normal">
            <div className="flex flex-col space-y-1">
              <p className="text-sm font-medium leading-none">{username as string}</p>
              <p className="text-xs leading-none text-muted-foreground">
               {useremail as string}
              </p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem onClick={handleItemClick}>
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem onClick={handleItemClick}>
              Billing
            </DropdownMenuItem>
            <DropdownMenuItem onClick={handleItemClick}>
              Settings
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator className="text-white"/>
          <DropdownMenuItem className="text-red-500" >
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    )
  }

also, the console gives me this error every 3 seconds:

this is the layout file:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import Navbar from '../components/ui/navbar'
import { ReduxProvider } from '@/redux/provider'
import 'material-icons/iconfont/material-icons.css';
import { NextAuthProvider } from './login/nextauthprovider'


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

export const metadata: Metadata = {
  title: 'demo',
  description: 'demo',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  
  return (
    <html lang="en">
      <body className="{inter.className}">
      <NextAuthProvider>
      <Navbar />
      <ReduxProvider>
        {children}
        </ReduxProvider>
      </NextAuthProvider>
        </body>
    </html>
  );
}

Additional information

No response

Example

No response

[sebastiancoronel]

Im using Vite. It happened the same to me. I restarted the server in my terminal by doing this shorcuts:
h + enter (to show help menu).
r + enter (to restart the server)

Then I went to the browser and I reload the page cleaning the cache several times.
It worked as fast as the problem appeared.