CSS and Images Not Loading on Next.js App
21 replies
Last updated: Jan 14, 2023
E
the css and some of images is not loading anymore on my next,js app. one the Chrome console, it's giving me this error "Failed to load resource: the server responded with a status of 403 ()" how can i fix this?
Jan 14, 2023, 12:24 AM
K
It is difficult to answer without more information but I'll try. When you say your not getting some images does that mean some images are being received?
Jan 14, 2023, 3:10 AM
K
Is this a next.js issue or Sanity?
Jan 14, 2023, 3:14 AM
E
i have the way to show up, but the styling still not loading and browser console is not giving error.
Jan 14, 2023, 3:14 AM
K
What page is it happening on? Just one or all?
Jan 14, 2023, 3:15 AM
E
i built the next.js app and now implementing it on sanity
Jan 14, 2023, 3:15 AM
E
local host 3000 and the sanity studio is on local host3333
Jan 14, 2023, 3:16 AM
K
So both are not working?
Jan 14, 2023, 3:16 AM
E
im still building the schema for sanity but the next.js is done it's just the css is that one that's not loading. i used tailwind css
Jan 14, 2023, 3:18 AM
K
Did you follow these steps?
https://tailwindcss.com/docs/guides/nextjs
https://tailwindcss.com/docs/guides/nextjs
Jan 14, 2023, 3:19 AM
E
yes. it was perfecting working earlier and i took a break and re-opened my computer now styling is not loading
Jan 14, 2023, 3:21 AM
K
Okay do you have a global.css file? Can you post it here?
Jan 14, 2023, 3:23 AM
E
@import 'tailwindcss/base';@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
.contactInput {
}
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
user E
px-6 py-2 border border-x-gray-900 rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-x-slate-500 hover:border-gray-800 }.contactInput {
user E
outline-none bg-slate-400/10 rounded-sm border-b px-4 py-4 border-zinc-800 text-gray-300 placeholder-gray-500 transition-all focus:border-gray-300/40 focus:text-yellow-100/60 hover:border-yellow-100/60 }}
Jan 14, 2023, 3:26 AM
E
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.heroButton {
@apply px-6 py-2 border border-x-gray-900 rounded-full uppercase text-xs tracking-widest text-gray-500 transition-all hover:border-x-slate-500 hover:border-gray-800
}
.contactInput {
@apply outline-none bg-slate-400/10 rounded-sm border-b px-4 py-4 border-zinc-800 text-gray-300 placeholder-gray-500 transition-all focus:border-gray-300/40 focus:text-yellow-100/60 hover:border-yellow-100/60
}
}Jan 14, 2023, 3:28 AM
K
It should look like this.
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
Jan 14, 2023, 3:30 AM
K
Please check the documentation and do it that way as that is how Next js recommends. If there are still problems let me know.
Jan 14, 2023, 3:34 AM
E
that worked but i needed that layers component section for this circle button so it can help to scroll up to the start of the page.
Jan 14, 2023, 3:39 AM
E
and it was working earlier even without removing the @layers part on global css file
Jan 14, 2023, 3:40 AM
K
So when you click the button it should take you back to the top of the page? Is this the functionality you need help with?
Jan 14, 2023, 3:43 AM
K
The layers component doesn't offer any functionality for going back to the top of the page but if your saying it still doesn't look correct I would add the styles directly to the elements first then when the work you can move it to the layers component.
Jan 14, 2023, 3:49 AM
E
i think removing the layer components and refreshing it and adding it back somehow worked. idk if the issue will happen again. if it does, i will defiantly try that. Thank you.
Jan 14, 2023, 4:06 AM
K
Okay good. Glad I could help
Jan 14, 2023, 4:07 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.