Next.js Discord

Discord Forum

Next13 app dir, error 500 from public directory just on VPS

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
BartholomeasOP
Hello, could some 1 take a look at this: https://bstefaniak.pl/ ?

I have background images in my /public directory, it was working perfectly all the time but now all images from /public directory are undefined 😦
It occurs just on hosted website, locally during development everything is ok (on builded and served locally too)

Its responding with error 500...

Nextjs13 with app dir.
Thanks!

my packages: 
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@mantine/carousel": "^6.0.21",
    "@mantine/core": "^6.0.21",
    "@mantine/form": "^6.0.21",
    "@mantine/hooks": "^6.0.21",
    "@mantine/modals": "^6.0.21",
    "@mantine/next": "^6.0.21",
    "@mantine/notifications": "^6.0.21",
    "@mantine/prism": "^6.0.21",
    "@tabler/icons-react": "^2.38.0",
    "@types/node": "18.16.3",
    "@types/nodemailer": "^6.4.11",
    "@types/react": "18.2.5",
    "@types/react-dom": "18.2.3",
    "client-only": "^0.0.1",
    "dayjs": "^1.11.10",
    "embla-carousel-react": "8.0.0-rc12",
    "eslint-config-next": "^13.5.4",
    "framer-motion": "^10.16.4",
    "next": "^13.5.4",
    "nodemailer": "^6.9.5",
    "path": "^0.12.7",
    "qs": "^6.11.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.7",
    "remark-gfm": "^3.0.1",
    "sharp": "^0.32.6",
    "typescript": "5.0.4"


Here is repo, but i dont think it matters: https://github.com/Bartholomeas/portfolio-website

73 Replies

BartholomeasOP
Image from my VPS, with started nextjs project
BartholomeasOP
Bump
Dunker
Says invalid connection header
@Dunker Says invalid connection header
BartholomeasOP
But how it automatically crashed without any changes other than bumping up next version 👀

So should i configure somehow nginx?
Clown
weird. Its pulling the image from the wrong place
the image definitely exists ^
Dunker
and check your .env settings to make sure you are using prod env
Clown
I will check the links, i think its most likely a problem with setting up nginx
also do you know the last version it was working correctly?
BartholomeasOP
It was 13.5.1 probably
i checked that too and i saw these images exist 🤔
And i thought about nginx too, but no idea how i can fix that
@Dunker was it working before deployment when build
BartholomeasOP
Yeah, was working builded locally, was working deployed before
I bumped next version only ( im 99% sure ) and its crashed
I tried to back to old version and it did not help 😅
Dunker
downgrading next is not only deleting next from package.json
BartholomeasOP
i cleared .next, lock and node_modules
thats my current nginx config
Clown
ohh i think it might have to do with your next config tbh
either or you need to do forwarding shenanigans in that location / {} block
1) convert the image domains to remotePatterns firstly: https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
2) as a temporary solution use <img> instead of <Image>
BartholomeasOP
This isnt enough? Its sick, because images fetched from my CMS Strapi are working, just ones served in /public directory doesnt
Clown
you shouldnt need to put localhost and stuff in there tbh
Dunker
i think problem is this invalid connection header
BartholomeasOP
So what ill need to do and where should i find solution? Im not into nginx configurations etc, i just followed tutorial 👀
Dunker
why your portfolio deployment is that complex 😄
Clown
try converting to remotePatterns first and then if that doesnt fix it, use the temporary solution which should be to use <img> instead of <Image>
https://github.com/vercel/next.js/issues/53715
active issue is already here. Some people are saying its fixed in x version and y version but i think those are mostly flukes. Its random probably
Dunker
oh this issue, i saw same problem many times
BartholomeasOP
Yeah, as i saw many posts its "working in 5.1 but not in 5.2" other says "working in 5.4 but not in 5.3" etc... xd
@Clown try converting to remotePatterns first and then if that doesnt fix it, use the temporary solution which should be to use <img> instead of <Image>
BartholomeasOP
What should i place here? Because host is localhost on my VPS
Or am i wrong?
Dunker
i suggest downgrade to 13.4.x
BartholomeasOP
because these images are served during build, right?
Dunker
you dont need that remote patterns, those are being like cdn.sanity.co etc
BartholomeasOP
and somewhere i saw that "domains" is substitute of that
Dunker
domains for maybe your custom domains like myportfolio.com
where did you deploy this on VPS, and where are you seeing this logs on
@Dunker where did you deploy this on VPS, and where are you seeing this logs on
BartholomeasOP
What do you mean 
where did you deploy this on VPS
? Provider? Its OVH

Im getting that logs on pm2 log command
@Clown as i said, do this first
BartholomeasOP
Its working with <img/> tag.. Interesting (two first images on landing) https://bstefaniak.pl/
Clown
Thats probably just being tiled. You can fix that from css properties
@Bartholomeas What should i place here? Because host is localhost on my VPS
Clown
you dont really to use localhost or 127.0.0.1 if i am correct. Only put the links from external providers.

This is only used in <Image> (the next image component) if im correct( i maybe wrong ) so if you are using an external component to fetch images or just using the normal <img> it probably wont effect it.
lots of probably-ies there lmfao
@Clown Thats probably just being tiled. You can fix that from css properties
BartholomeasOP
I do not understand 🤔
It was working before
Clown
Image kinda works differently from img. That width and height isnt even used for the actual image
BartholomeasOP
And if its css, so it shouldnt show alt attribute? Or am i wrong?
Clown
what???
BartholomeasOP
You said that i can fix that with css properties
Clown
anyways thats a different issue. background-repeat: no-repeat is the property im talking about
BartholomeasOP
Because in my 90% of <Image/> tag im doing something like that: 
      <Image
        src={shapes[shape]}
        height="0"
        width="0"
        sizes="50vw"
        alt="Abstrakcyjny i kolorowy kształt"
        className={classes.image}
      />


Im just settings Image sizes to 50vw and controlling sizes with css, that doesnt affect this error?
So in summary, how ill probably fix that? 😅
Clown
does Image even work for you?
as for <img> its a separate issue so you'll have to open another thread for that
Dunker
try removing these src, className, sizes and give them absolute heights, widths like 200px
Clown
if this issue is fixed, please mark it as such
you'll likely just have to mess around with css to fix that tiling issue (this thread is already 60 msgs long and the original problem seems to have been fixed)
BartholomeasOP
Tilling = this grain on images? its intended.

But <Image/> (from next) doesnt work anyway, just html tag <img/> is working (which i dont want to use) so problem still exists
BartholomeasOP
i do not have duplicates 👀
These are 2 different images
Clown
yeah i just realized, im dumb
@Bartholomeas Its working with <img/> tag.. Interesting (two first images on landing) https://bstefaniak.pl/
Clown
i misread that message and thought you meant the 2 first images as an issue
anyways, Image still not working with remotedomains?
trying canary is the absolute last thing i can suggest or maybe that webpack thing(try checking if image works without it).

other than i would say just use img till the problem gets solved, because this might just be a bug.
Idk, maybe i accidentally changed something more that is crashing this.. 😐
BartholomeasOP
Ok, its working now, probably my changing next version doesnt applied by package.json somehow, and i need to do it "from hand"
Thanks for help!
closed