Next.js Discord

Discord Forum

Hosting complete NextJS app

Answered
California pilchard posted this in #help-forum
Open in Discord
Avatar
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 require("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.
View full answer

80 Replies

Avatar
require("anay-208")
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
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
require("anay-208")
AWS is a good solution. I can explain the pricing of it
are you using aws amplify gen2 or gen1
Avatar
California pilchardOP
gen1, I dont know how to move my app to gen2 ? Shoud I ?
Avatar
require("anay-208")
gen2 doesn't support custom domains rn
Image
Avatar
California pilchardOP
Okay so maybe to soon
Avatar
require("anay-208")
do you need any help in understanding aws amplify pricing
Avatar
California pilchardOP
Well im a student im completly broke so I just wanna be sure to avoid unpredictable bill
Avatar
require("anay-208")
I'm also a student
Thats the same with me. I researched about it for a long time, before using aws
Avatar
California pilchardOP
Im gonna be ur crash test
😂
Avatar
require("anay-208")
Hmm
So do you want to use aws or you can use other platform
Avatar
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
if u click very fast on each item of this navbar something I got a client side error with the Vercel version
Image
before testing AWS I was thinking about a problem of my code but seems to be Vercel
Avatar
require("anay-208")
hmm
Image
Avatar
California pilchardOP
sry .app
I fix the link mb
to expensive for me ahah
Avatar
require("anay-208")
Image
Avatar
California pilchardOP
u see
But not with AWS version
Avatar
require("anay-208")
yup
Avatar
California pilchardOP
Its working pretty well with AWS, but its weird because Vercel is the main hoster for NextJS so Im confused
Avatar
require("anay-208")
Yup, you'll need to upgrade to use in vercel
Avatar
California pilchardOP
Why ? Because of image optimization ?
Avatar
require("anay-208")
to increase image optimization limit
Avatar
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
require("anay-208")
pro tier 5000 image optimization
Avatar
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
require("anay-208")
your options are to:
- switch provider
- Dont use image optimization(Not recommended)
enterprise plan then
Avatar
California pilchardOP
ahah maybe if I sell my liver
Can we self host NextJS app with image optimization ? Like in a VPS ?
Avatar
require("anay-208")
Yup
I know some cheap vps services
which I personally use
Avatar
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
require("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.
Answer
Avatar
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
require("anay-208")
there is a youtube video link also in that example
You can also host in a vps, which is just under $5/month
Avatar
California pilchardOP
But that mean I can have unlimited image optimization ?
Avatar
require("anay-208")
You can, depending on vps performance and traffic
You can dm me i can share link of some of them
Avatar
California pilchardOP
I use Hetzner for other app, maybe use this VPS ?
Avatar
require("anay-208")
It’s your wish whichever you feel like using
Avatar
California pilchardOP
and maybe using something like Coolify can be useful for auto rebuild app when pushing git ?
Avatar
require("anay-208")
Haven’t heard of that. You can try that
But handling a vps can be tough if you’re new to it
Avatar
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
require("anay-208")
Client side is because of images only
Too many attempted to be loaded
Avatar
California pilchardOP
oh really ?
Avatar
require("anay-208")
I believe
Avatar
California pilchardOP
Because I had this client side error before hitting the image optimization limits
Avatar
require("anay-208")
Oh
Try contacting Vercel
Support
Avatar
California pilchardOP
That why I was thinking the issue come from my code
np Im gonna ask in the forum maybe
Avatar
require("anay-208")
Do you need any more help with anything else
You can also try to use netlify, if it works
Avatar
California pilchardOP
I guess im okay for now ahah thx a lot for ur time really
Avatar
require("anay-208")
Can you mark my message as a solution
Any message which helped you the most
Thanks