Next.js Discord

Discord Forum

Routing Issue (404 Not Found)

Unanswered
Kishu posted this in #help-forum
Open in Discord
KishuOP
Hi guys, when I run my project using npm run dev, everything is fine. But when I build it, after accessing url directly I get 404 not found. I know that I have static pages. please help. 🙂 cheers

58 Replies

Masai Lion
Code?
@Kishu
KishuOP
which file
Masai Lion
If you don’t share a project we can’t really know why it is failing
It can be from updating your next js up to a problem with any of your files
KishuOP
the structure is like this
I dont know which file should I share
Masai Lion
What is the last file you opened
Giant panda
Please read our guidelines, you haven't shared any details yet like which routes cause the 404 etc. https://nextjs-forum.com/post/1138338531983491154#message-1138338531983491154
KishuOP
every single url that I access directly, I get 404 after building it. but for example if I choose Contact us from the menu, thats ok
I mean direct access to localhost:X/AI is getting 404
@Kishu every single url that I access directly, I get 404 after building it. but for example if I choose Contact us from the menu, thats ok
Masai Lion
Then maybe you don’t have your layout.tsx configured lol
KishuOP
but when I click it from the menu from the root, thats fine
Giant panda
Because /AI maps to the file /AI/index.tsx which doesn't exist
KishuOP
I created it and tested. still nothing
with this code
wait
import AISectionOne from './AISectionOne';
import AISectionTwo from './AISectionTwo';
function AIIndex() {
return (
<div>
<AISectionOne />
<AISectionTwo />
</div>
);
}

export default AIIndex;
although I get another error here, because there is app/AI/page.tsx too.
Giant panda
Yes, because you can't have ambiguous paths matching both pages and app router
KishuOP
so what should I do
can I send my screen recording video here?
Giant panda
I am quoting the guidelines:
Fully describe what you're trying to accomplish
KishuOP
I have this project with a specific directory structure where I have two .tsx files (AISectionOne.tsx and AISectionTwo.tsx) inside the pages/AI directory. I want to be able to navigate to these pages via the routes /AI/AISectionOne and /AI/AISectionTwo. However, I am encountering an issue where I receive a 404 error when trying to directly access these routes. Despite having an index.tsx file in the AI directory that exports a component combining AISectionOne and AISectionTwo, navigating to /AI still results in a 404 error. This issue persists even after correctly setting up my files and directories, and ensuring the correct usage of the Link component and href prop in my Next.js application.
Giant panda
What does your app folder look like? Do you have ambiguous paths in there that also map to the ones in the pages folder?
KishuOP
I have app directory too, which each page in 'pages' folder has a folder in it. In fact those in the pages directory are components and in the app directory, I have like the following code for each page:
import AISectionOne from "@/pages/AI/AISectionOne";
import AISectionTwo from "@/pages/AI/AISectionTwo";
import Breadcrumb from "@/pages/Common/Breadcrumb";

import { Metadata } from "next";

export const metadata: Metadata = {
title: "AI Hunting",
description: "This is AI Page",
// other metadata
};

const AIPage = () => {
return (
#Unknown Channel
<Breadcrumb
pageName="AI"
description="
In the age of Artificial Intelligence (AI), where innovation meets complexity, securing your AI ecosystem is paramount."
/>
<AISectionOne />
<AISectionTwo />
</>
);
};

export default AIPage;
Giant panda
This doesn't answer my question.
What does your app folder look like?
Show me a screenshot of its structure.
KishuOP
Giant panda
Okay this shows that the app folder is not interfering on the /AI route.
Since you are saying that you have a 404 when trying to access http://localhost:3000/AI/AISectionOne and http://localhost:3000/AI/AISectionTwo it's possible that those two files aren't properly recognized as routable pages, either due to wrong structure or naming. Can you share the general structure of the the /AI/AISectionOne file? You can omit the full function body, just the imports/exports and top level definitions are relevant.
KishuOP
import Image from "next/image";
import SectionTitle from "../Common/SectionTitle";

const checkIcon = (
  <svg width="16" height="13" viewBox="0 0 16 13" className="fill-current">
    <path d=X
  </svg>
);

const AISectionOne = () => {
  const List = ({ text }) => (
    <p className="mb-5 flex items-center text-lg font-medium text-body-color">
      <span className="mr-4 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-primary bg-opacity-10 text-primary" style={{ color: 'MediumSpringGreen' }}>
        {checkIcon}
      </span>
      {text}
    </p>
  );

  return (
    <section id="AI" className="pt-16 md:pt-20 lg:pt-28">
      <div className="container">
        <div className="border-b border-body-color/[.15] pb-16 dark:border-white/[.15] md:pb-20 lg:pb-28">
          <div className="-mx-4 flex flex-wrap items-center">
            <div className="w-full px-4 lg:w-1/2">
            <h3 className="mb-4 text-2xl font-bold text-black dark:text-white sm:text-4xl lg:text-2xl xl:text-4xl">
            Why Choose Our AI Security Services?
                </h3>
Giant panda
Okay then do the following. Try to delete the .next folder while the dev server is not running and see if the problem persists.
KishuOP
didnt work
the point is the links works well when forexample I click on them from the menu. but when I copy the url and enter in another tap, get 404
Its so weird
Now I got something while building it: 
> startup-nextjs-template@0.2.0 build
> next build

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  .Pages directory cannot be found at /home/hesam/Downloads/main/startup-nextjs-main (another copy)/pages or /home/hesam/Downloads/main/startup-nextjs-main (another copy)/src/pages. If using a custom path, please configure with the `no-html-link-for-pages` rule in your eslint config file.
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (25/25) 
 ✓ Finalizing page optimization
related?
Giant panda
From here on you'd have to create a minimal working example where you remove anything unrelated to the pages in order to figure out what's wrong. For example I just created a new project and the routing when accessing that path works just fine.
So it's related to something with your setup, machine or codebase that is not obvious.
KishuOP
may I see your app/
Giant panda
It's just a freshly bootstrapped app without customization and shouldn't interfere because no paths are duplicated
KishuOP
if you want to add another folders to the app, what will you do
I mean
in AI1 I have page.tsx
Giant panda
Which is completely irrelevant
Because you said your pages in the pages router aren't routable for some inexplicable reason
And as long as the app folder does not have colliding paths it won't interfere
You could even the delete the app folder and not see a difference
KishuOP
so why I cant refresh any pages? I get 404 too
Giant panda
From here on you'd have to create a minimal working example where you remove anything unrelated to the pages in order to figure out what's wrong.
KishuOP
ok I will try, thanks!