Next.js Discord

Discord Forum

Nav bar not working

Unanswered
Dwarf Hotot posted this in #help-forum
Open in Discord
Avatar
Dwarf HototOP
When trying to navigate pages, when im at the home page and go to the 2nd page it works but when i go back to the home button(the target like the href is /) it just brings me to a blank white page and then when i press the back arrow to go back to the home page the nav bar doesnt show up from the layout.tsx

6 Replies

Avatar
Dwarf HototOP
import React from 'react';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <p>This is a basic home page built with React and TypeScript.</p>
    </div>
  );
};

export default HomePage;
the code for the home page
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Link from "next/link";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Unblocked Gaming",
  description: "Play your favorite games without any restrictions!",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-gray-800`}>
        <header className="bg-blue-600 text-white p-4 rounded-lg shadow-lg mx-4 my-4">
          <nav className="container mx-auto flex justify-center">
            <ul className="flex space-x-8">
              <li>
                <Link href="/" className="hover:underline">
                  Home
                </Link>
              </li>
              <li>
                <Link href="/games" className="hover:underline">
                  Games
                </Link>
              </li>
            </ul>
          </nav>
        </header>
        <main>{children}</main>
        <footer className="bg-blue-600 text-white p-4 text-center">
          © 2023 Unblocked Gaming
        </footer>
      </body>
    </html>
  );
}
code for the layout page
// app/games/page.tsx
import React from 'react';
import Layout from '../layout';

const gamesList = [
  { id: 1, name: 'Game 1', url: 'https://example.com/game1' },
  { id: 2, name: 'Game 2', url: 'https://example.com/game2' },
  { id: 3, name: 'Game 3', url: 'https://example.com/game3' },
];

const Games: React.FC = () => {
  return (
    <Layout>
      <h2 className="text-xl mb-4">Available Games</h2>
      <ul className="list-disc pl-5">
        {gamesList.map(game => (
          <li key={game.id}>
            <a href={game.url} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
              {game.name}
            </a>
          </li>
        ))}
      </ul>
    </Layout>
  );
};

export default Games;
code for the other page
If someone could help me here i would appricate thanks
Avatar
Dwarf HototOP
Haven’t tried it on build