Hosting complete NextJS app
Answered
California pilchard posted this in #help-forum
California pilchardOP
Okay, well no idea what can I put in the title because I just need some advice for hosting my web app (using NextJS 14 and Supabase)
Answered by Anay-208
In Next. js, a loader function creates image URLs for different sizes, helping in automatic srcset generation for optimal viewport display. Next. js's default loader uses its own Image Optimization API to serve optimized images, but if you're using a CDN or custom image server usage, you need to write your own loader.
80 Replies
Ok sure
Let me help you
You can use netlify, there is another downside. Downtime probably won't occur now, however, you won't be able to use cloudflare with netlify, as you'll have to use netlify nameservers
And there are many alternates like cf pages
California pilchardOP
Is AWS is a good solution ? because rn Ive setup my app to Amplify because Vercel no allow me to display my image
But Ive no idea about the pricing of this
AWS is a good solution. I can explain the pricing of it
are you using aws amplify gen2 or gen1
California pilchardOP
gen1, I dont know how to move my app to gen2 ? Shoud I ?
gen2 doesn't support custom domains rn
California pilchardOP
Okay so maybe to soon
do you need any help in understanding aws amplify pricing
California pilchardOP
Well im a student im completly broke so I just wanna be sure to avoid unpredictable bill
I'm also a student
Thats the same with me. I researched about it for a long time, before using aws
California pilchardOP
Im gonna be ur crash test
😂
Hmm
So do you want to use aws or you can use other platform
California pilchardOP
I use AWS for like 3h just because Vercel make weird stuff but I like Vercel
Btw if u wanna see the problem with Vercel, there is my Vercel version : https://recomend-git-dev-xmesky.vercel.app/@loup
and there is my AWS Amplify version : https://recomend.app/@loup
and there is my AWS Amplify version : https://recomend.app/@loup
if u click very fast on each item of this navbar something I got a client side error with the Vercel version
before testing AWS I was thinking about a problem of my code but seems to be Vercel
California pilchardOP
sry .app
I fix the link mb
to expensive for me ahah
California pilchardOP
u see
But not with AWS version
yup
California pilchardOP
Its working pretty well with AWS, but its weird because Vercel is the main hoster for NextJS so Im confused
Yup, you'll need to upgrade to use in vercel
California pilchardOP
Why ? Because of image optimization ?
to increase image optimization limit
California pilchardOP
Yeah but is sooo expensive ahah
My entiere app is based on image if I have to pay for each image optimization is gonna be very hard to maintain
And even the Pro tier dont allow a lot of image optimization
pro tier 5000 image optimization
California pilchardOP
Yes but rn Im the only one to use the app (for testing), so when im gonna publish my app with other using its gonna hit the liimit very quickly
your options are to:
- switch provider
- Dont use image optimization(Not recommended)
- switch provider
- Dont use image optimization(Not recommended)
enterprise plan then
California pilchardOP
ahah maybe if I sell my liver
Can we self host NextJS app with image optimization ? Like in a VPS ?
California pilchardOP
I dont really understand how work image optimization... Its something automatically made by NextJS or we need service (like in docker, etc...) ?
In Next. js, a loader function creates image URLs for different sizes, helping in automatic srcset generation for optimal viewport display. Next. js's default loader uses its own Image Optimization API to serve optimized images, but if you're using a CDN or custom image server usage, you need to write your own loader.
Answer
California pilchardOP
what do u mean by custom image server ? U think about S3 storage ? Because my image are store in Supabase and from external API (TMDB). So when NextJS generate optimal image, Next create real image file in the cache or something like that ?
you can view more about it here.
https://nextjs.org/docs/pages/building-your-application/optimizing/images
https://nextjs.org/docs/pages/building-your-application/optimizing/images
there is a youtube video link also in that example
You can also host in a vps, which is just under $5/month
California pilchardOP
But that mean I can have unlimited image optimization ?
You can, depending on vps performance and traffic
You can dm me i can share link of some of them
California pilchardOP
I use Hetzner for other app, maybe use this VPS ?
It’s your wish whichever you feel like using
California pilchardOP
and maybe using something like Coolify can be useful for auto rebuild app when pushing git ?
Haven’t heard of that. You can try that
But handling a vps can be tough if you’re new to it
California pilchardOP
Yeah sure but I use VPS for many years now so its gonna be fine ahah
But I really dont understand why Vercel have client side error damn sry with that but I doesnt make sens
Client side is because of images only
Too many attempted to be loaded
California pilchardOP
oh really ?
I believe
California pilchardOP
Because I had this client side error before hitting the image optimization limits
California pilchardOP
That why I was thinking the issue come from my code
np Im gonna ask in the forum maybe
Do you need any more help with anything else
You can also try to use netlify, if it works
California pilchardOP
I guess im okay for now ahah thx a lot for ur time really