Next.js Discord

Discord Forum

Vercel Deployment Issues

Answered
Cairn Terrier posted this in #help-forum
Open in Discord
Cairn TerrierOP
Morning Everyone, I have an issue where when I open my nextJS project on localhost, it looks normal, but when I deploy the project to Vercel, it looks messy like it has no style, I've tried various ways but it's still like that, I need help to solve it this problem, thank you

If You wanna see my project code use this Github Link : https://github.com/THERIZKY/next-app-testing
Answered by Cairn Terrier
Okay, thanks for helping i already know whats wrong with my code, i accidently, Write my components folder with Capital C But in the tailwind config content, it writen with lowercase c, so it doesn't connect at all
View full answer

30 Replies

not-milo.tsx
Do you see any warnings during the build, and are there any errors logged in the console?
Also check in the network tab if your stylesheets are being loaded properly
@not-milo.tsx Do you see any warnings during the build, and are there any errors logged in the console? Also check in the network tab if your stylesheets are being loaded properly
Cairn TerrierOP
I don't see any warning diringkus the build, but how can i check the network tab ini vercel?
not-milo.tsx
You don't check it on Vercel. go to your deployed application url, open the developer tools, and find the network tab at the top right side of the window that pops up. There you'll see all network activity happening on your website
Cairn TerrierOP
It looks normal, i guess
not-milo.tsx
Oooh, I see what's happening. Can you show me where the navbar component is in your project structure and the content entry in your tailwind.config.js?
The navbar styles are not being included by Tailwind. If you inspect the navbar you'll see that there are no corresponding styles for navbar-logo, h-24 and so on...
Cairn TerrierOP
inside the layouts folder on navbar folder
and my tailwind config in the root of the folder
not-milo.tsx
Let me see the top of your tailwind config file
Cairn TerrierOP
content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/layouts/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
not-milo.tsx
can you collapse all folders in the side panel and send me a screenshot of that? I can't see if everything is nested in some other folder or not
Cairn TerrierOP
Like this?
or like this?
Cairn TerrierOP
Okay, thanks for helping i already know whats wrong with my code, i accidently, Write my components folder with Capital C But in the tailwind config content, it writen with lowercase c, so it doesn't connect at all
Answer
Either it wasn't in your content or the path was wrong
@not-milo.tsx Yeah, exactly what I thought here ✌🏻
Cairn TerrierOP
thank you so much
but, why in my localhost its look fine?
i am curious why that happend
not-milo.tsx
Next.js tries to be smart about what resources need to be updated and what not. Sometimes it gets it wrong and things break or seem to be working when in reality they shouldn't. When this happens, deleting the .next directory and restarting the server forces it to recompile everything and gets rid of any weird leftover artifacts.
@Cairn Terrier i am curious why that happend
joulev
vercel is case-sensitive so components != Components. your computer is case-insensitive so components == Components
not-milo.tsx
It's rare tho
not-milo.tsx
You sure? The op stated that it worked fine for a while even with the wrong path
joulev
this is a known issue related to casing. and i'm pretty sure about that
vercel is linux, and linux is case sensitive
OP's OS is likely windows or macOS, which are case insensitive
not-milo.tsx
Oooooohhhh, that's a new one for me... Thanks! 😁
@joulev vercel is case-sensitive so components != Components. your computer is case-insensitive so components == Components
Cairn TerrierOP
I see, that's new for me... thank you so much