Hello,
I’ve been looking for days how to make a link.
I have integrated a footer and so I have several links that I would like to redirect to my current page.
I manage to make a link for my contact page because it is in /contact/page.tsx
like this:
<Link href="/contact">
<span className="cursor-pointer hover:underline">Nous contacter</span>
</Link>
on the other hand for another of my links it doesn’t work even though I did exactly the same thing I created a directory /conditions/page.tsx
and here is my footer the link that doesn’t work
<Link href="/conditions">
<span className="cursor-pointer hover:underline">Conditions générales</span>
</Link>
it’s exactly the same thing though.
Can you help me?
Hi @cdevl3749 , yes that would be the routing convention. What does your conditions/page.tsx
look like?
1 Like
Thank you for your answer, I’ve been trying to make the links for my footer for days.
Here is my conditions/page.tsx file
"use client";
import Navbar from "@/components/navbar";
const Conditions = () => {
return (
<div className="flex flex-col w-full h-screen bg-black/[0.96] bg-grid-white/[0.02]">
<Navbar
scrollToWebsiteDesign={() => {}}
scrollToGraphicDesign={() => {}}
scrollToShopifyStores={() => {}}
scrollToBrands={() => {}}
scrollToServices={() => {}}
/>
<div className="container mx-auto px-4 py-12 text-white max-w-4xl">
<h1 className="text-4xl font-bold mb-8">Terms and Conditions</h1>
<section className="mb-8">
<h2 className="text-2xl font-semibold mb-4">1. Acceptance of Terms</h2>
<p className="mb-4">
By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-semibold mb-4">2. Use License</h2>
<p className="mb-4">
Permission is granted to temporarily download one copy of the materials (information or software) on this website for personal, non-commercial transitory viewing only.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-semibold mb-4">3. Disclaimer</h2>
<p className="mb-4">
The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
</p>
</section>
<section className="mb-8">
<h2 className="text-2xl font-semibold mb-4">4. Limitations</h2>
<p className="mb-4">
In no event shall we or our suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on this website.
</p>
</section>
</div>
</div>
);
};
export default Conditions;
I still show you my layouts.tsx file
import { Analytics } from '@vercel/analytics/react';
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";
import Footer from '@/components/Footer';
// import CookieConsentBanner from "@/components/CookieConsentBanner";
const font = Poppins(
{ subsets: ["latin"],
weight: '400'
}
);
export const metadata: Metadata = {
title: "ShopiX Optimisez votre activité",
description: "Créez, développez et faites évoluer votre entreprise",
icons: {
icon: '/favicon.ico',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="fr">
<body
suppressHydrationWarning={true}
className={font.className}>
<Analytics />
{children}
{/* <CookieConsentBanner /> */}
<Footer />
</body>
</html>
);
}
and my file in the app/page.tsx directory
'use client'
import { useRef } from "react";
import Navbar from "@/components/navbar";
import SliderOne from "@/components/ui/slider";
import { Spotlight } from "@/components/ui/spotlight";
// import Image from "next/image";
import Link from "next/link";
// import Footer from "@/components/Footer";
import WebsiteDesign from "./website-design";
import GraphicDesign from "./graphic-design";
import ShopifyStores from "./shopify-stores";
import Brands from "./brands";
import Services from "./services";
import FAQS from "./faq";
import { InfiniteMovingCardsDemo } from "./snippets/infinite-moving-card-snippet";
import CookieConsentBanner from "@/components/CookieConsentBanner";
// import Footer from "@/components/Footer";
// import Head from "next/head";
export default function Home() {
// const [isDropdownVisible, setDropdownVisible] = useState(false);
/* const toggleDropdown = () => {
setDropdownVisible(!isDropdownVisible);
};
const closeDropdown = () => {
setDropdownVisible(false);
}; */
{/* <Head>
<link rel="icon" href="/app/favicon.ico" />
</Head> */}
const websiteDesignRef = useRef<HTMLDivElement>(null);
const graphicDesignRef = useRef<HTMLDivElement>(null);
const shopifyStoresRef = useRef<HTMLDivElement>(null);
const brandsRef = useRef<HTMLDivElement>(null);
const servicesRef = useRef<HTMLDivElement>(null);
const scrollToWebsiteDesign = () => {
websiteDesignRef.current?.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
};
const scrollToGraphicDesign = () => {
graphicDesignRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToShopifyStores = () => {
shopifyStoresRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToBrands = () => {
brandsRef.current?.scrollIntoView({ behavior: "smooth" });
};
// Function to scroll to Services section
const scrollToServices = () => {
servicesRef.current?.scrollIntoView({ behavior: "smooth" });
};
return (
<div className="w-full md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
<Navbar
scrollToWebsiteDesign={scrollToWebsiteDesign}
scrollToGraphicDesign={scrollToGraphicDesign}
scrollToShopifyStores={scrollToShopifyStores}
scrollToBrands={scrollToBrands}
scrollToServices={scrollToServices}
/>
<Spotlight className="hidden md:flex md:-top-80 left-80 " fill="white" />
<div className="p-4 mx-auto relative z-10 w-full pt-10 md:pt-20 px-2">
<div className="text-4xl pb-5 md:text-7xl px-6 text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
Créez, développez et <br /> faites évoluer votre entreprise
</div>
<p className="mt-4 text-lg font-normal text-neutral-300 max-w-lg text-center mx-auto px-4">
Des solutions sur mesure pour votre entreprise. Nous sommes une équipe de créatifs qui sont ravis de vous aider à développer votre entreprise.
</p>
<Link
href={"/book"}
className="cursor-pointer flex items-center justify-center border rounded-full w-48 p-2 mx-auto my-6 text-white "
>
Réserver un appel
</Link>
<div className="w-full pt-20">
<SliderOne />
</div>
<CookieConsentBanner />
<div ref={websiteDesignRef}>
<WebsiteDesign />
</div>
<div ref={graphicDesignRef}>
<GraphicDesign />
</div>
<div ref={shopifyStoresRef}>
<ShopifyStores />
</div>
<div ref={brandsRef}>
<Brands />
</div>
<div ref={servicesRef}>
<Services />
</div>
<InfiniteMovingCardsDemo />
<FAQS />
{/* { <Footer
scrollToWebsiteDesign={scrollToWebsiteDesign}
/> } */}
</div>
</div>
);
}
Thanks for the code! I don’t see a problem with the routing per se… so what exactly do you mean with “doesn’t work”?
Now I’ve set up a simple working example with some minimal layout and routing from the snippets you posted:
Maybe you can add your additional logic and UI elements here – piece by piece – until it breaks, so we can narrow down the issue?
2 Likes
Good morning,
Thanks to you, I looked and I did exactly the same thing.
I published here on vercel you can see that the footer links do not work.
For example also if you go to the contact or price page the links in the navbar no longer work.
https://shopixdev.vercel.app/
m3g4p0p
January 29, 2025, 11:33am
6
Well, from your vercel page I can only tell that the page in question does not seem to exist. Can you reproduce the issue locally, or is this specific to vercel?
If you can reproduce it locally, could you try to share a minimal example that demonstrates the issue? You can just fork the above stackblitz, for instance. On your vercel page I can only see the production build of your code, which is very hard to debug.
Also, just trying to isolate the problem can already help you find the solution. :-)
1 Like
m3g4p0p:
Well, from your vercel page I can only tell that the page in question does not seem to exist. Can you reproduce the issue locally, or is this specific to vercel?
If you can reproduce it locally, could you try to share a minimal example that demonstrates the issue? You can just fork the above stackblitz, for instance. On your vercel page I can only see the production build of your code, which is very hard to debug.
Also, just trying to isolate the problem can already help you find the solution.
Thank you for your response,
I have the same problem locally.
I think the relevant code is here but I’m a newbie and I don’t really know how to do it.
in page.tsx which is in app I have this and I think that in the footer I have to modify?
when I do a run build I have this
page.tsx
'use client'
import { useRef } from "react";
import Navbar from "@/components/navbar";
import SliderOne from "@/components/ui/slider";
import { Spotlight } from "@/components/ui/spotlight";
// import Image from "next/image";
import Link from "next/link";
// import Footer from "@/components/Footer";
import WebsiteDesign from "./website-design";
import GraphicDesign from "./graphic-design";
import ShopifyStores from "./shopify-stores";
import Brands from "./brands";
import Services from "./services";
import FAQS from "./faq";
import { InfiniteMovingCardsDemo } from "./snippets/infinite-moving-card-snippet";
import CookieConsentBanner from "@/components/CookieConsentBanner";
// import Footer from "@/components/Footer";
// import Head from "next/head";
export default function Home() {
// const [isDropdownVisible, setDropdownVisible] = useState(false);
/* const toggleDropdown = () => {
setDropdownVisible(!isDropdownVisible);
};
const closeDropdown = () => {
setDropdownVisible(false);
}; */
{/* <Head>
<link rel="icon" href="/app/favicon.ico" />
</Head> */}
const websiteDesignRef = useRef<HTMLDivElement>(null);
const graphicDesignRef = useRef<HTMLDivElement>(null);
const shopifyStoresRef = useRef<HTMLDivElement>(null);
const brandsRef = useRef<HTMLDivElement>(null);
const servicesRef = useRef<HTMLDivElement>(null);
const scrollToWebsiteDesign = () => {
websiteDesignRef.current?.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
};
const scrollToGraphicDesign = () => {
graphicDesignRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToShopifyStores = () => {
shopifyStoresRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToBrands = () => {
brandsRef.current?.scrollIntoView({ behavior: "smooth" });
};
// Function to scroll to Services section
const scrollToServices = () => {
servicesRef.current?.scrollIntoView({ behavior: "smooth" });
};
return (
<div className="w-full md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
<Navbar
scrollToWebsiteDesign={scrollToWebsiteDesign}
scrollToGraphicDesign={scrollToGraphicDesign}
scrollToShopifyStores={scrollToShopifyStores}
scrollToBrands={scrollToBrands}
scrollToServices={scrollToServices}
/>
<Spotlight className="hidden md:flex md:-top-80 left-80 " fill="white" />
<div className="p-4 mx-auto relative z-10 w-full pt-10 md:pt-20 px-2">
<div className="text-4xl pb-5 md:text-7xl px-6 text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
Créez, développez et <br /> faites évoluer votre entreprise
</div>
<p className="mt-4 text-lg font-normal text-neutral-300 max-w-lg text-center mx-auto px-4">
Des solutions sur mesure pour votre entreprise. Nous sommes une équipe de créatifs qui sont ravis de vous aider à développer votre entreprise.
</p>
<Link
href={"/book"}
className="cursor-pointer flex items-center justify-center border rounded-full w-48 p-2 mx-auto my-6 text-white "
>
Réserver un appel
</Link>
<div className="w-full pt-20">
<SliderOne />
</div>
<CookieConsentBanner />
<div ref={websiteDesignRef}>
<WebsiteDesign />
</div>
<div ref={graphicDesignRef}>
<GraphicDesign />
</div>
<div ref={shopifyStoresRef}>
<ShopifyStores />
</div>
<div ref={brandsRef}>
<Brands />
</div>
<div ref={servicesRef}>
<Services />
</div>
<InfiniteMovingCardsDemo />
<FAQS />
{/* { <Footer
scrollToWebsiteDesign={scrollToWebsiteDesign}
/> } */}
</div>
</div>
);
}
Other pages shouldn’t have anything to do with this really. But to be sure, try removing that page and see if it works then. Or replace it with a dummy component just returning an empty <div />
.
It looks like the /conditions
route is indeed not getting recognised. Just a shot in the dark, what happens if you remove the "use client"
directive here?
Maybe this page is helpful:
1 Like
I removed it and I still can’t resolve the link problem, although I created the /contact page.tsx which works and /conditions doesn’t work. I really don’t understand why.
I’ve been trying to resolve this problem for days.
m3g4p0p
February 3, 2025, 11:05am
10
It’s hard to tell without being able to inspect your source code, especially if the problem occurs at build time. No chance you can provide a minimal setup to reproduce the issue?
2 Likes
What I don’t understand is that for example I’m trying to simply make a simple link to the app/ directory.
<Link href="/website-design">
and impossible I show you the .tsx page which is located in the app directory.
'use client'
import { useRef } from "react";
import Navbar from "@/components/navbar";
import SliderOne from "@/components/ui/slider";
import { Spotlight } from "@/components/ui/spotlight";
// import Image from "next/image";
import Link from "next/link";
// import Footer from "@/components/Footer";
import WebsiteDesign from "./website-design";
import GraphicDesign from "./graphic-design";
import ShopifyStores from "./shopify-stores";
import Brands from "./brands";
import Services from "./services";
import FAQS from "./faq";
import { InfiniteMovingCardsDemo } from "./snippets/infinite-moving-card-snippet";
import CookieConsentBanner from "@/components/CookieConsentBanner";
// import Footer from "@/components/Footer";
// import Head from "next/head";
export default function Home() {
// const [isDropdownVisible, setDropdownVisible] = useState(false);
/* const toggleDropdown = () => {
setDropdownVisible(!isDropdownVisible);
};
const closeDropdown = () => {
setDropdownVisible(false);
}; */
{/* <Head>
<link rel="icon" href="/app/favicon.ico" />
</Head> */}
const websiteDesignRef = useRef<HTMLDivElement>(null);
const graphicDesignRef = useRef<HTMLDivElement>(null);
const shopifyStoresRef = useRef<HTMLDivElement>(null);
const brandsRef = useRef<HTMLDivElement>(null);
const servicesRef = useRef<HTMLDivElement>(null);
const scrollToWebsiteDesign = () => {
websiteDesignRef.current?.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
};
const scrollToGraphicDesign = () => {
graphicDesignRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToShopifyStores = () => {
shopifyStoresRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToBrands = () => {
brandsRef.current?.scrollIntoView({ behavior: "smooth" });
};
// Function to scroll to Services section
const scrollToServices = () => {
servicesRef.current?.scrollIntoView({ behavior: "smooth" });
};
return (
<div className="w-full md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
<Navbar
scrollToWebsiteDesign={scrollToWebsiteDesign}
scrollToGraphicDesign={scrollToGraphicDesign}
scrollToShopifyStores={scrollToShopifyStores}
scrollToBrands={scrollToBrands}
scrollToServices={scrollToServices}
/>
<Spotlight className="hidden md:flex md:-top-80 left-80 " fill="white" />
<div className="p-4 mx-auto relative z-10 w-full pt-10 md:pt-20 px-2">
<div className="text-4xl pb-5 md:text-7xl px-6 text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
Créez, développez et <br /> faites évoluer votre entreprise
</div>
<p className="mt-4 text-lg font-normal text-neutral-300 max-w-lg text-center mx-auto px-4">
Des solutions sur mesure pour votre entreprise. Nous sommes une équipe de créatifs qui sont ravis de vous aider à développer votre entreprise.
</p>
<Link
href={"/book"}
className="cursor-pointer flex items-center justify-center border rounded-full w-48 p-2 mx-auto my-6 text-white "
>
Réserver un appel
</Link>
<div className="w-full pt-20">
<SliderOne />
</div>
<CookieConsentBanner />
<div ref={websiteDesignRef}>
<WebsiteDesign />
</div>
<div ref={graphicDesignRef}>
<GraphicDesign />
</div>
<div ref={shopifyStoresRef}>
<ShopifyStores />
</div>
<div ref={brandsRef}>
<Brands />
</div>
<div ref={servicesRef}>
<Services />
</div>
<InfiniteMovingCardsDemo />
<FAQS />
{/* { <Footer
scrollToWebsiteDesign={scrollToWebsiteDesign}
/> } */}
</div>
</div>
);
}
m3g4p0p
February 4, 2025, 5:28pm
12
You’ve named the file conditions/pages.tsx
in the screenshot. That should be conditions/page.tsx
, no plural.
1 Like
Thank you for your help, it works.
How can I make this link work in my footer?
<Link href="/website-design">
1 Like
m3g4p0p
February 8, 2025, 9:17am
14
Glad I could help.
It works exactly the same way. If that’s not clear, you may want to check the documentation:
In particular, have a look at the nested routes section.
1 Like
Thank you, I’ve already looked at the documentation and I really don’t see how to do it.
I think that via the links in my footer I must use what is found here in the app/page.tsx directory my how to do ?
app/page.tsx
'use client'
import { useRef } from "react";
import Navbar from "@/components/navbar";
import SliderOne from "@/components/ui/slider";
import { Spotlight } from "@/components/ui/spotlight";
// import Image from "next/image";
import Link from "next/link";
// import Footer from "@/components/Footer";
import WebsiteDesign from "./website-design";
import GraphicDesign from "./graphic-design";
import ShopifyStores from "./shopify-stores";
import Brands from "./brands";
import Services from "./services";
import FAQS from "./faq";
import { InfiniteMovingCardsDemo } from "./snippets/infinite-moving-card-snippet";
import CookieConsentBanner from "@/components/CookieConsentBanner";
import ScrollToTopButton from "@/components/ScrollToTopButton";
// import Footer from "@/components/Footer";
// import Head from "next/head";
export default function Home() {
// const [isDropdownVisible, setDropdownVisible] = useState(false);
/* const toggleDropdown = () => {
setDropdownVisible(!isDropdownVisible);
};
const closeDropdown = () => {
setDropdownVisible(false);
}; */
{/* <Head>
<link rel="icon" href="/app/favicon.ico" />
</Head> */}
const websiteDesignRef = useRef<HTMLDivElement>(null);
const graphicDesignRef = useRef<HTMLDivElement>(null);
const shopifyStoresRef = useRef<HTMLDivElement>(null);
const brandsRef = useRef<HTMLDivElement>(null);
const servicesRef = useRef<HTMLDivElement>(null);
const scrollToWebsiteDesign = () => {
websiteDesignRef.current?.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest",
});
};
const scrollToGraphicDesign = () => {
graphicDesignRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToShopifyStores = () => {
shopifyStoresRef.current?.scrollIntoView({ behavior: "smooth" });
};
const scrollToBrands = () => {
brandsRef.current?.scrollIntoView({ behavior: "smooth" });
};
// Function to scroll to Services section
const scrollToServices = () => {
servicesRef.current?.scrollIntoView({ behavior: "smooth" });
};
return (
<div className="w-full md:items-center md:justify-center bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden">
<Navbar
scrollToWebsiteDesign={scrollToWebsiteDesign}
scrollToGraphicDesign={scrollToGraphicDesign}
scrollToShopifyStores={scrollToShopifyStores}
scrollToBrands={scrollToBrands}
scrollToServices={scrollToServices}
/>
<Spotlight className="hidden md:flex md:-top-80 left-80 " fill="white" />
<div className="p-4 mx-auto relative z-10 w-full pt-10 md:pt-20 px-2">
<div className="text-4xl pb-5 md:text-7xl px-6 text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to bg-neutral-400 bg-opacity-50">
Créez, développez et <br /> faites évoluer votre entreprise
</div>
<p className="mt-4 text-lg font-normal text-neutral-300 max-w-lg text-center mx-auto px-4">
Des solutions sur mesure pour votre entreprise. Nous sommes une équipe de créatifs qui sont ravis de vous aider à développer votre entreprise.
</p>
<Link
href={"/book"}
className="cursor-pointer flex items-center justify-center border rounded-full w-48 p-2 mx-auto my-6 text-white "
>
Réserver un appel
</Link>
<div className="w-full pt-20">
<SliderOne />
</div>
<CookieConsentBanner />
<ScrollToTopButton />
<div ref={websiteDesignRef}>
<WebsiteDesign />
</div>
<div ref={graphicDesignRef}>
<GraphicDesign />
</div>
<div ref={shopifyStoresRef}>
<ShopifyStores />
</div>
<div ref={brandsRef}>
<Brands />
</div>
<div ref={servicesRef}>
<Services />
</div>
<InfiniteMovingCardsDemo />
<FAQS />
{/* { <Footer
scrollToWebsiteDesign={scrollToWebsiteDesign}
/> } */}
</div>
</div>
);
}
components/Footer.tsx
// Footer.tsx
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
const Footer = () => {
return (
<footer className="bg-black text-white p-10">
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<Link href="/">
<Image src="/logo/logo_footer.png" alt="Logo" width={50} height={50} className="mb-4" />
</Link>
<p>ShopiX - Optimisez votre activité.</p>
</div>
<div>
<h3 className="font-bold mb-3">Conception</h3>
<ul>
<li>
<Link href="/#website-design">
<span className="cursor-pointer hover:underline">Website Design</span>
</Link>
</li>
<li>
<Link href="/#graphic-design">
<span className="cursor-pointer hover:underline">Graphic Design</span>
</Link>
</li>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">Conception Web UX</span>
</Link>
</li>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">Responsive</span>
</Link>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-3">Développement</h3>
<ul>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">Développement web sur mesure</span>
</Link>
</li>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">E-commerce Store</span>
</Link>
</li>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">Test de logiciel</span>
</Link>
</li>
<li>
<Link href="/">
<span className="cursor-pointer hover:underline">Refonte web sur mesure</span>
</Link>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-3">Accés Rapide</h3>
<ul>
<li>
<Link href="/conditions">
<span className="cursor-pointer hover:underline">Conditions générales</span>
</Link>
</li>
<li>
<Link href="/confidentialite">
<span className="cursor-pointer hover:underline">Politique de confidentialité</span>
</Link>
</li>
<li>
<Link href="/book">
<span className="cursor-pointer hover:underline">Réserver un appel</span>
</Link>
</li>
<li>
<Link href="/contact">
<span className="cursor-pointer hover:underline">Nous contacter</span>
</Link>
</li>
</ul>
</div>
</div>
<div className="text-center pt-8 border-t border-gray-700 mt-8">
<p>© {new Date().getFullYear()} ShopiX All rights reserved.</p>
</div>
</footer>
);
};
export default Footer;
m3g4p0p
February 8, 2025, 11:42am
16
Again, your app/page.tsx
has nothing to do with it. The routes are defined by the file naming convention. Have a look here:
Now have a look at a route that’s working, say /contact
. What’s the corresponding file path in your project?
Then have a look at a route that is not working. What’s the file and directory name here?
1 Like
Thank you for your help
I’m a novice and it’s not easy for me, I’m tinkering and trying to understand.
Do you think that if you have two minutes you could look at this problem for example with TeamViewer ?
the path for contact I do it like this:
<Link href="/contact">
<span className="cursor-pointer hover:underline">Nous contacter</span>
</Link>
The path for example which does not work for graphic-design
<Link href="/website-design">
<span className="cursor-pointer hover:underline">Website Design</span>
</Link>
m3g4p0p
February 8, 2025, 12:16pm
18
Okay so you have the routes /contact
and /website-design
. What are the file paths where you have the corresponding components? Something ending with the file extension .tsx
.