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 Ping me for help
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
Ping me for help
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
Ping me for help
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 ?
Ping me for help
gen2 doesn't support custom domains rn
California pilchardOP
Okay so maybe to soon
Ping me for help
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
Ping me for help
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
😂
Ping me for help
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
Ping me for help
hmm
California pilchardOP
sry .app
I fix the link mb
to expensive for me ahah
Ping me for help
California pilchardOP
u see
But not with AWS version
Ping me for help
yup
California pilchardOP
Its working pretty well with AWS, but its weird because Vercel is the main hoster for NextJS so Im confused
Ping me for help
Yup, you'll need to upgrade to use in vercel
California pilchardOP
Why ? Because of image optimization ?
Ping me for help
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
Ping me for help
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
Ping me for help
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 ?
Ping me for help
Yup
I know some cheap vps services
which I personally use
California pilchardOP
I dont really understand how work image optimization... Its something automatically made by NextJS or we need service (like in docker, etc...) ?
Ping me for help
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 ?
Ping me for help
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 ?
Ping me for help
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 ?
Ping me for help
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 ?
Ping me for help
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
Ping me for help
Client side is because of images only
Too many attempted to be loaded
California pilchardOP
oh really ?
Ping me for help
I believe
California pilchardOP
Because I had this client side error before hitting the image optimization limits
Ping me for help
Oh
Try contacting Vercel
Support
California pilchardOP
That why I was thinking the issue come from my code
np Im gonna ask in the forum maybe
Ping me for help
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
Ping me for help
Can you mark my message as a solution
Any message which helped you the most
Thanks