I am getting a 404 error and I do not know what to do
Unanswered
Gidbug/Gideon posted this in #help-forum
Hello, I was making some pages for my Next.Js site and I was trying to reorganize and directories to add my files so they follow how next.js wants it to be but while doing that and organizing it I saw that now my output has been weird. I have tried undoing my change but that made it worse and now I keep on getting the 404 error page not found, I tried to check typescript files to see if the imports were changed and they were all still the same. I seriously do not know what to do right now, It has been more than 1 hour that I have encountered this issue and I am kind of getting a bit stressed from it. I would really appreciate the help and also an explanation and walkthrough of how it was done. I am still new to Next.Js (started learning it 4 days ago 😅) I shared some images to help a litte and also some information too below to help.
Important info:
Thank you so much for helping me out I really appreciate it!
Important info:
pages.tsxI am using IntelliJ (not the Java one but the one that accepts the majority of the programming language if that makes sense)My Next.Js verison is 14.2.5 (I want to believe the latest version)Thank you so much for helping me out I really appreciate it!
205 Replies
Catla
@Gidbug/Gideon The file needs to be called page inside your folder pages.
So if you have a site where you have links for /blog/ and /news/ you would have folders called blog and news with page.tsx inside there. Then if you make components you can name them whatever but reference them inside the page file.
If Login and Main are components just use them inside the page file. If they're actual pages then you need to make Folders with Login and Main that contain a page.tsx file inside.
and page.tsx would act like the index page for that.
-- Edit for more info.
For example, in my project I have the app folder and within that app folder I make a folder for any page I have on my site, so for example app->blog app->news
Then inside those folders I contain a page.js file (page.tsx in your case).
@Catla -- Edit for more info.
Oh, so, app --> page ---> page.tsx?
Catla
The index page for the site itself will be the one with app->page.tsx
@Gidbug/Gideon Oh, so, app --> page ---> page.tsx?
Catla
Yes so if you have a Login page on your site you will add the folder login to your app folder and then create a page.tsx file inside.
Creating my directory now to do these changes
@Catla If Login and Main are components just use them inside the page file. If they're actual pages then you need to make Folders with Login and Main that contain a page.tsx file inside.
so will i create the directory inside the page folder?
Catla
What is the route you want?
sitename.com/login/ ?
If you make more directories inside pages they act like this -> sitename.com/pages/login/
So if you have app->pages->login
pages( temperary main)/welcome page/login/start
@Catla What is the route you want?
Is it possible if we can get into a discord call if that's okay? and I can share my screen of the code?
Catla
So your site is going to have sitename.com/pages/welcomepage/login/start directories?
Seems a bit odd
Or are these parts of a single page?
Looks like components to me
Like having a page which contains a welcome section, a login widget or whatever, and some other actions.
if that makes sesne
Catla
So if you're making a landing page you don't need directories for the pages like that.
When you create a next.js project you'll see a page.tsx file in the root.
That is your index page.
From there you make a folder to hold your components or whatever, and make your server and client side components as needed.
Then in the page.tsx file within the app folder you reference those and build the page.
Catla
So based on what you've shown above, in your page.tsx file within your app folder, did you reference those components you made yet?
I only see a layout file. That would explain the 404 error.
I haven't yet, I am still trying to organize it
Catla
So without a page.tsx file in your app directory you will get a 404.
That acts like your "index.html" for a better sense (If you're coming from that)
Oh, that makes alot of sense
@Catla That acts like your "index.html" for a better sense (If you're coming from that)
so my page.tsx is like the main file that directs to the other files is that right?
Catla
Here is an example of that page:
import MainBar from "./components/MainBar";
import LoginWidget from "./components/LoginWidget";
export default function Home() {
return (
<div>
<MainBar/>
<h1>This is the Home Page!</h1>
<LoginWidget/>
</div>
);
}Basic example anyhow
Thank you so much and give me one sec, I am currently trying to reorganize my files and I will share a screenshot once I finish to show
Catla
Okay.
So i did something and It was able to bring up how my page looked like orginally but it isn't styled right
@Catla Okay.
We are getting somewhere because now I can see the screen again but the layout is not formated correctly
I think I was able to fix it but idk what I did 😅
Catla
Okay, as long as it is working.
I moved a layout fix to something to a folder and that apprently fixed it
Thank you so much @Catla , I really appreciate it alot
Can I ask you another question if that's okay?
Catla
Sure
Also you can read up on pages and layouts here: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
Catla
I would also suggest reading up on App Router and Pages Router to get accustomed to the differences.
By doing the app->foldername->page.tsx you're using the App Router approach.
What question did you have?
@Catla Sure
I am trying to link a page but I am also getting a 404 error on it and I am not understanding why Idk if it was the same thing we did that might fix it like I linked with a Link tag and that didn't work and I tried a <a> and that also didn't work I also looked at a documentation and installed library and that also library didn't work :/ here is a snppet of my code with the <a>
@Catla What question did you have?
sorry about that I was trying to test something to see if it worked but I am still not getting anything 😅
<Link href="/">Home</Link>Just import Link from next/link
So if you want to go to a blog page it would be:
This means you need a folder called blog within app which has a page.tsx file.
<Link href="/blog">Blog</Link>This means you need a folder called blog within app which has a page.tsx file.
Assuming you're continuing with the App Route approach.
Catla
Can you show your folder/file structure?
sure
Catla
What is in the welcome file?
Catla
So in the page in your browser what error does it show?
@Catla So in the page in your browser what error does it show?
404:page could not be found
@giftedly is this WebStorm or just IntelliJ *with plugins*?
It's IntelliJ with Plugins I want to believe 😅
okay 🙂
@Gidbug/Gideon 404:page could not be found
Catla
So you're using welcome.tsx inside page.tsx right?
@Catla So you're using welcome.tsx inside page.tsx right?
They are in the same directory
Catla
Not what I mean.
If I go to your main page on your site - your landing page. You're using welcome.tsx inside the page.tsx file correct?
try building your project and try running
npx serve in .next and see if it resolves a error thereif its still there its most likely a problem with your code
Catla
Also you'll find with next.js you'll be deleting the .next folder a lot and re-doing stuff due to cache. Bit of a PIA. 😄
I just wanted to confirm you're using welcome.tsx correctly inside page.tsx.
do I import my file sorry, i dont think my welcome page is in my page.tsx
Catla
But how are you expecting to use it?
Can you share the page.tsx code?
sure
Catla
So if you actually went to the sitename.com/welcome yes you'll get a 404 error
Catla
because you need a folder called welcome that has page.tsx inside.
Is that what you're trying to do?
Yes, I have a button and I want to it to take the person to the next page
Catla
The GET 404 error appears like that if you try to access a route that isn't there.
Okay but like we talked about before, you need to make a folder in app
call it welcome
Then make a file called page.tsx
That will be your welcome page
if you want you might wanna try making a page router, in my opinion its better if your not used to the whole concept of
page.tsxCatla
Otherwise if you want to route it to your home page since this is a landing page you should be routing to "/"
I would stick to App for now, he is far too new to be going back and forth
yeah
hes too far deep into the project
Catla
I can see why it might be a bit of a throw off because coming from React where you just make your page components and indicate them to now having to do folders and with page.tsx.
but for making new pages you would have to make a new folder named
welcome in your case and make a page.tsx inside of there containing your codeotherwise it wont register your code and next will just ignore it
to my knowledge
Catla
Yes, this is why you see the GET 404 on that /welcome
dont keep
welcome.tsxCatla
So is welcome some server or client side component?
its just
page.tsxCatla
If not, remove it and put the stuff in page.tsx
^^
Catla
You can just rename the file welcome to page
since the code is all in there anyhow
Catla
Yes, now when you try to access the /welcome page you wont get a 404
But again, read above, move the code from welcome into page
Delete the welcome file after if not needed
@Catla I can see why it might be a bit of a throw off because coming from React where you just make your page components and indicate them to now having to do folders and with page.tsx.
yeah the problem is Next pushes the App router as the new and improved, which in some circumstances would be, but for beginners coming from vanilla React, its not the best because people have to get used to the new
page.tsx style of routing their pages, which can be confusing to some. i could see a future where the docs say the Page router is better for beginnersCatla
Personally I still just build my react projects from scratch if it is all client side. 😄
I don't use next.js for those.
@Gidbug/Gideon My head is about to expload, lol I am still getting a 404 eror lol
Catla
Is the folder inside app
app->welcome->page.tsx
yes it is
Catla
What link did you set in <Link>
Or whatever push you're using etc...
@Catla Personally I still just build my react projects from scratch if it is all client side. 😄
lol my friend told me that too, he said React is way more simplier than the Next js
Catla
I use next.js because certain sites I work on need good SEO so I prefer to have Static pages rendered from the server.
@Catla I use next.js because certain sites I work on need good SEO so I prefer to have Static pages rendered from the server.
thats a fair reason, and for me i like how the API if you need it is built in, so you don't have to create 2 applications, they are all in one, and the api doesn't need to be strangled together with the client for them both to be on the same domain
Catla
If a site is of little importance the bots are not just going to wait around and excute JS for your indexing.
I wanted to challenge myself that's why I decided to use next and it also looked interesting 😅
Catla
Can you show how you're directing to the welcome page?
Code please?
@giftedly thats a fair reason, and for me i like how the API if you need it is built in, so you don't have to create 2 applications, they are all in one, and the api doesn't need to be *strangled together* with the client for them both to be on the same domain
Catla
I do like that about next.js I can do both.
I still remember some horrors managing webpack with my React project.
Catla
Wrong link
just have /welcome
This needs to be href="/welcome"
Catla
Yes, now it should work
Catla
That is old cache
?
Just do a basic Link to test:
<Link href="/welcome">Welcome Page</Link>Stop your dev server and try again. If it is a cache issue just delete the .next folder and then run "npm run dev"
@Catla That is old cache
it's the recent one but I can restart the terminal
Catla
You're going to run into cache issues sooner or later. 😄
I've done my fair share of deleting the .next folder
@Catla I've done my fair share of deleting the .next folder
more than that xD
@Catla You're going to run into cache issues sooner or later. 😄
hehe, I actually ran into one today and had to delete my .next folder and it resinsatlling it by itself
@Gidbug/Gideon Click to see attachment
Catla
so for reference when you see the GET /src/app/welcome.tsx that just means it is trying to find: localhost:port/src/app/welcome.tsx
But you don't reference the files like that in the Link
You reference the route you want so welcome in this case. Your folder name.
ooh okay, thank you so much
I am going to delete the .next folder and hopefully this works 😅
I found something @Catla that might be an reason on why it is not reaching the welcome page
so after looking at it looks as if the it is calling my public folder and not the actually welcome folder
Catla
Is it fixed?
unfortunetly it isn't I just an observation because Intellij created a welcome.tsx folder in the public directory so I want to asseume it is being called there or it's refering there
Catla
Just make sure you have app->welcome->page.tsx
Delete .next
re-run npm run dev
It should solve the issue
Make sure you're not trying to link to anything other that /welcome so nothing like you did before in the links.
I did :/
Catla
So what is the error now when you click the link?
It stll says 404
Catla
Show the error please...
Also if you Ctrl + F5 to refresh and try again, same result?
to factor out client side caching
Same with incognito mode.
Catla
Not the page screenshot, console error messages
I want to see the GET message
@Catla I want to see the GET message
I was thinking since my page.tsx is in a welcome folder I change the actual welcome file to welcome2.tsx so it won't confuse the computer anyways I am getting 404
Catla
So you have something linking to a /welcome2/
?
It is the same thing but <Link href="/welcome2">
Catla
Do you have a welcome2 folder?
I do not
Catla
So if you have a link for welcome2 you will get a 404
You need a welcome2 folder with page.tsx
Why do you have a welcome and welcome2 link ?
Shouldn't you just have welcome ?
I have welcome, I chnaged it back because I thought it was conflicting the directory
Catla
Now when you run it what happens?
nothing, like i click the button and it takes me no where
Catla
Show me the code to the link
I wills send a video
Catla
Show me your folder structure again
In future you should try to upload stuff to github
Makes it easier to review
Actually, I can do that rn :)
one sec
@Catla I think I might call for today but I will post it on my github later tomorrow/later today, I really appreciate all the help and @giftedly thank you also for the help, I really appreciate it!
Catla
Okay no problem. Take care.
thank you and you too!
@Catla I think I was able to fix it!
Catla
👍
@Catla 👍
I really appreciate your help, the issue was that I had two pages directory so it was confused about which one to use and how I found was when I was running the build command on my terminal I saw that it kept on pointing to the pages directory with the main and login files and I realized that's where the program was scanning to find the files.
Catla
Sounds good.