I’ve just created a new next js project and I’m currently implementing the client-side navigation.
The problem is that I ‘m not able to navigate to another route than “/”.
Layout.js :
import "../styles/globals.css";
export const metadata = {
title: "Julien Claerhout",
description: "Julien Claerhout portfolio",
favicon: "../public/favicon.ico",
};
export default function RootLayout({ children }) {
return (
<html lang="fr">
<body>{children}</body>
</html>
);
}
page.js :
import Home from './home';
export default function Page() {
return <Home />;
}
home.js :
import Image from "next/image";
import Nav from './nav';
function Home() {
return (
<div className="flex flex-col bg-white overflow-auto">
<div className="h-screen flex flex-col">
<div className="h-1/5 flex items-center justify-center">
<Nav />
</div>
<div className="h-4/5 flex flex-row">
<div className="w-2/3 flex items-center justify-center">
<Image className="rounded-full" src="/images/me.jpg" alt="Julien Claerhout" width={400} height={400} />
</div>
<div className="w-2/3 flex items-center">
<div className="text-center">
<h1 className="text-8xl font-zen-bold text-darkgreen">Julien Claerhout</h1>
<p className="text-4xl font-zen-black text-darkgreen">IT student</p>
</div>
</div>
</div>
</div>
<div className="px-8 py-4">
<h2 className="text-4xl font-zen-bold text-darkgreen mb-4">About Me</h2>
<p className="text-lg text-darkgreen">
// Ajoutez ici le texte de votre choix
</p>
</div>
</div>
);
}
export default Home;
nav.js :
import Link from "next/link";
function Nav() {
return (
<nav>
<Button href="/">Acceuil</Button>
<Button href="/portfolio">Portfolio</Button>
<Button href="/cv">CV</Button>
</nav>
);
}
function Button({ href, children }) {
return (
<Link href={href}>
<button className="m-2 w-24 h-12 rounded-3xl text-lg font-zen-bold bg-lightgreen transform transition-transform duration-500 hover:scale-110">
{children}
</button>
</Link>
);
}
export default Nav;
When I click on my nav buttons, for “portfolio” and “cv” routes, I have 404 page not found.
Here is my file structure :
I’ve read the next js app router doc but wasn’t able to fix my issue…