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

[uneven trellis]

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

[mortal acorn]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[uneven trellis]

Image from my VPS, with started nextjs project

[uneven trellis]

Bump

[modern imp]

Says invalid connection header

[uneven trellis]

But how it automatically crashed without any changes other than bumping up next version 👀

So should i configure somehow nginx?

[modern imp]

was it working before deployment when build

[neon pasture]

weird. Its pulling the image from the wrong place

https://bstefaniak.pl/abstract/serpent_3.webp

the image definitely exists ^

[modern imp]

and check your .env settings to make sure you are using prod env

[neon pasture]

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?

[uneven trellis]

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

[uneven trellis]

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 😅

[modern imp]

downgrading next is not only deleting next from package.json

[uneven trellis]

i cleared .next, lock and node_modules

thats my current nginx config

[neon pasture]

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>

[uneven trellis]

This isnt enough? Its sick, because images fetched from my CMS Strapi are working, just ones served in /public directory doesnt

[neon pasture]

you shouldnt need to put localhost and stuff in there tbh

[modern imp]

i think problem is this invalid connection header

[uneven trellis]

So what ill need to do and where should i find solution? Im not into nginx configurations etc, i just followed tutorial 👀

[neon pasture]

as i said, do this first

[modern imp]

why your portfolio deployment is that complex 😄

[neon pasture]

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

[modern imp]

oh this issue, i saw same problem many times

[uneven trellis]

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

[uneven trellis]

What should i place here? Because host is localhost on my VPS

Or am i wrong?

[modern imp]

i suggest downgrade to 13.4.x

[uneven trellis]

because these images are served during build, right?

[modern imp]

you dont need that remote patterns, those are being like cdn.sanity.co etc

[uneven trellis]

and somewhere i saw that "domains" is substitute of that

[modern imp]

domains for maybe your custom domains like myportfolio.com

where did you deploy this on VPS, and where are you seeing this logs on

[uneven trellis]

What do you mean where did you deploy this on VPS? Provider? Its OVH

Im getting that logs on pm2 log command

[uneven trellis]

Its working with <img/> tag.. Interesting (two first images on landing) https://bstefaniak.pl/

[neon pasture]

Thats probably just being tiled. You can fix that from css properties

[neon pasture]

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

[uneven trellis]

I do not understand 🤔
It was working before

[neon pasture]

Image kinda works differently from img. That width and height isnt even used for the actual image

[uneven trellis]

And if its css, so it shouldnt show alt attribute? Or am i wrong?

[neon pasture]

what???

[uneven trellis]

You said that i can fix that with css properties

[neon pasture]

anyways thats a different issue. background-repeat: no-repeat is the property im talking about

[uneven trellis]

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? 😅

[neon pasture]

does Image even work for you?

as for <img> its a separate issue so you'll have to open another thread for that

[modern imp]

try removing these src, className, sizes and give them absolute heights, widths like 200px

[neon pasture]

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)

[uneven trellis]

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

[uneven trellis]

ok, ill try that

[neon pasture]

Tiling is that duplicate image

[uneven trellis]

i do not have duplicates 👀

These are 2 different images

[neon pasture]

yeah i just realized, im dumb

[neon pasture]

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.

[uneven trellis]

yeah, nothing changed

Idk, maybe i accidentally changed something more that is crashing this.. 😐

[uneven trellis]

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