Hosting complete NextJS app
Answered
California pilchard posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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 | Ping 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
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping 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
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
AWS is a good solution. I can explain the pricing of it
are you using aws amplify gen2 or gen1
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
gen1, I dont know how to move my app to gen2 ? Shoud I ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
gen2 doesn't support custom domains rn
![Image](https://cdn.discordapp.com/attachments/1187087482664275998/1187088189807149168/image.png?ex=65959d07&is=65832807&hm=a3736a57a0898614115c0ebefe2f942fc4b6f5e4b1786bd87d0c93f303eab3e1&)
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Okay so maybe to soon
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
do you need any help in understanding aws amplify pricing
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Well im a student im completly broke so I just wanna be sure to avoid unpredictable bill
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
I'm also a student
Thats the same with me. I researched about it for a long time, before using aws
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Im gonna be ur crash test
😂
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Hmm
So do you want to use aws or you can use other platform
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
![Image](https://cdn.discordapp.com/attachments/1187087482664275998/1187089555275403375/Capture_decran_2023-12-20_a_18.49.36.png?ex=65959e4d&is=6583294d&hm=c37c7c193a4be20576ccc0b8124130bbf91cf8a8460ed10dcf4f8adadc14b43c&)
before testing AWS I was thinking about a problem of my code but seems to be Vercel
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
hmm
![Image](https://cdn.discordapp.com/attachments/1187087482664275998/1187089732996452522/image.png?ex=65959e77&is=65832977&hm=e5b846c50d5c8307a2d814f73a4363c16c98f5ff27ee8d8aa8779dfdc4949050&)
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
sry .app
I fix the link mb
to expensive for me ahah
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
![Image](https://cdn.discordapp.com/attachments/1187087482664275998/1187089835236798474/image.png?ex=65959e8f&is=6583298f&hm=1b8760cc08d39a07ca6111b1e2ba25482399d3e01aa649fa3946b68e03dd2ae8&)
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
u see
But not with AWS version
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
yup
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Its working pretty well with AWS, but its weird because Vercel is the main hoster for NextJS so Im confused
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Yup, you'll need to upgrade to use in vercel
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Why ? Because of image optimization ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
to increase image optimization limit
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
pro tier 5000 image optimization
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping 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
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
ahah maybe if I sell my liver
Can we self host NextJS app with image optimization ? Like in a VPS ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Yup
I know some cheap vps services
which I personally use
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
I dont really understand how work image optimization... Its something automatically made by NextJS or we need service (like in docker, etc...) ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping 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
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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 ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping 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
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
But that mean I can have unlimited image optimization ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
You can, depending on vps performance and traffic
You can dm me i can share link of some of them
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
I use Hetzner for other app, maybe use this VPS ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
It’s your wish whichever you feel like using
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
and maybe using something like Coolify can be useful for auto rebuild app when pushing git ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Haven’t heard of that. You can try that
But handling a vps can be tough if you’re new to it
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Client side is because of images only
Too many attempted to be loaded
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
oh really ?
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
I believe
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
Because I had this client side error before hitting the image optimization limits
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Oh
Try contacting Vercel
Support
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
That why I was thinking the issue come from my code
np Im gonna ask in the forum maybe
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Do you need any more help with anything else
You can also try to use netlify, if it works
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
California pilchardOP
I guess im okay for now ahah thx a lot for ur time really
![Avatar](https://cdn.discordapp.com/avatars/755810867878297610/5ab9ece60bc14c554a7376a599d3deb3.webp?size=256)
Anay-208 | Ping For Help
Can you mark my message as a solution
Any message which helped you the most
Thanks