Next.js Discord

Discord Forum

I deployed my Tailwind UI Next.js app using Vercel, and it just gives me the Vercel 404

Answered
Large Münsterländer posted this in #help-forum
Open in Discord
Large MünsterländerOP
I have been able to successfully deploy my app using Vercel, but the deployment just shows a 404 when I try to load it. I'm using a Tailwind UI template and my suspicion is that it has to do with the project structure that I've included in the picture. There is no error message associated or anything like that, but the logs (which I have also included) seem to indicate that it is only building the components in my /app directory and not my /components directory unless I'm reading it wrong. Any help would be much appreciated.
Answered by Large Münsterländer
Apparently the default framework setting is "other". I figured it might help to change it to nextjs and it did!
View full answer

32 Replies

not-milo.tsx
Your components are not meant to be built. Only pages and api routes inside your /app, or /pages, directory get built.

Components are meant to be used/imported inside your pages
Large MünsterländerOP
Ok cool that’s what I thought and that’s how it works locally, but I don’t have a ton of other ideas about why it’s not working
not-milo.tsx
What are you trying to accomplish?
And also what's inside your app directory?
Large MünsterländerOP
I just want to be able to share my website non locally with my business partner. I’ll attach a picture of the inside of the app directory
page.jsx is where my actual primary landing page lives
page.jsx in the app directory I should say*
not-milo.tsx
Where are you getting the 404 page?
Large MünsterländerOP
From the link that vercel provides me
My guess is that it has something to do with the lack of an index.jsx file, but this is the way that Tailwind set it up and I have to imagine there was a reason for that (unless it's literally as simple as renaming my page.jsx file to index.jsx)
Just tried that and it went to my local 404 page
not-milo.tsx
No, renaming page.jsx isn't an option since that's a Next.js naming convention for pages in the app router
It's weird that you're getting a 404 like this... It means Vercel hasn't actually deployed your app at that url
Large MünsterländerOP
Yeah it's strange I'm pretty lost myself at how this would happen
not-milo.tsx
Have you configured any custom domains on Vercel?
Large MünsterländerOP
I have not
I've done nothing in vercel in terms of any configurations I just told it to deploy that github repository
This is the only line vercel has about it in their docs if it helps:

The path you are accessing was not found in the Build Outputs of your Deployment. If you want to view your Build Outputs directly, you can turn on the Directory Listing
When I turn on directory listing (which seems to be what it wants me to do), it shows me this instead of the 404
It seems to want an index file in the public folder but I wouldn't know what to put in it
not-milo.tsx
Ooh, after fixing the issue about the public directory from before did you publish your changes?
Large MünsterländerOP
I did yeah. I just put favicon in it for now because I didn't want to go through and fix my file paths. It didn't deploy at all before that (ran into an error with npm run build)
not-milo.tsx
Can you show me what the logs on the latest deployment look like?
Large MünsterländerOP
These two screenshots include all of the logs from the latest deployment
not-milo.tsx
Have you tried disabling directory listing from your project's settings on Vercel?
Make sure to rebuild the app after switching it off.
Large MünsterländerOP
It was off before actually (that was when it was showing the 404 page). I turned that on as a troubleshooting step but I can totally turn it off again if helpful
I figured it out!
Large MünsterländerOP
Apparently the default framework setting is "other". I figured it might help to change it to nextjs and it did!
Answer
Large MünsterländerOP
Milo you are my hero, thank you so much for the help you've given me this evening
@Large Münsterländer Apparently the default framework setting is "other". I figured it might help to change it to nextjs and it did!
not-milo.tsx
Yup, that should be automatically detected by Vercel when you link the repository. I guess it just didn't get it right this time around 😅