NextJS Hosting: AWS vs Vercel!
NextJS Hosting: AWS vs Vercel!
This last week I’ve been working on my website. You can find it at https://www.kodaps.dev. I’ve been using it to test the new app/ directory in Next JS 13. Which in retrospect was perhaps not the brightest thing to do. This prompted me to move from AWS Amplify to Vercel. In this video, I explain why
#nextjs #vercel #aws
----
Want to go into further depth? Head to https://www/kodaps.dev/
Content
0.07 -> Next JS Hosting: Why I moved my website from
AWS to Vercel
1.07 -> Hey everyone
2.07 -> This last week I’ve been working on my website.
3.139 -> You can find it at `www.kodaps.dev`.
7.109 -> This may not have been the brightest thing
I’ve ever done, but I’ve been using it
10.29 -> to test the new `app/` directory in Next JS
13.
15.62 -> When you do so, Next JS quickly warns you
that the `app/`directory is still in beta,
19.39 -> unstable, and liable to change.
21.09 -> And let’s say… that is **not** an exaggeration.
24.28 -> Generally speaking, I usually host everything
I do on AWS because I like how fast they innovate,
30.359 -> and they tend to be cheaper than other options
for projects that don’t have much traffic.
34.96 -> And AWS has set up an excellent integration
with Next JS using their Amplify service.
40.969 -> Honestly, it’s painless to set up.
43.07 -> They take guide you through the process.
44.729 -> You plug it into a GitHub repository.
47.039 -> Amplify updates the environment whenever you
push code to the main branch.
50.8 -> I was impressed with how seamless it was.
53.87 -> And you can set up different environments.
55.2 -> For example, I set up a preproduction environment
to test changes before pushing them into production.
61.5 -> And it was a good thing I did: I had recurring
bugs when navigating — particularly when
65.68 -> returning from a page.
67.49 -> I’d hoped the new Next 13.3 release would
solve the problem.
72.88 -> Boy, was I wrong!
75.05 -> The 13.3 release introduced a whole slew of
new bugs.
78.95 -> From the outside, it feels like many of those
bugs were linked to “Jest Workers” … at
83 -> least, that was what the crashes were saying
in my local development environment and the
87.34 -> Amplify logs.
88.88 -> When I went to GitHub to see if there were
any fixes or workarounds, I found out I was
93.619 -> not the only one to be confronted with the
problem.
95.77 -> One user even said that the 13.3 was the buggiest
release he had seen in a while.
100.56 -> Now because I was also fixing bugs on the
website (linked to how it combined French
106.57 -> and English), I couldn’t wait for the bug
to be fixed.
112.13 -> And so, I decided to try hosting the website
on Vercel, which finances Next JS.
117.29 -> Not because Vercel provided a better experience.
119.78 -> But because it felt like deploying on Vercel
might have been better tested.
124.15 -> And the experience on Vercel was very much
comparable to that on AWS.
127.689 -> Deploying is just as seamless.
129.679 -> And the website didn’t have as many bugs.
132.23 -> Now, this move wasn’t because Vercel was
better or cheaper.
135.19 -> It was because Next JS 13.3 introduced instabilities
that broke both my local environment and Amplify
142.239 -> on AWS.
143.239 -> So I have two pieces of advice for you today.
146.11 -> First: don’t use the `app/`directory in
production for anything requiring a high level
150.7 -> of stability.
151.7 -> It’s okay for hobby sites but not ready
to be used professionally.
155.68 -> Second: even for hobby sites, if you don’t
want to use Vercel hosting, don’t use the
160.319 -> `app/`directory just yet.
161.569 -> I’m having a lot of fun in Next JS 13 using
React as a backend solution with Server Components.
166.58 -> However, it requires a bit of a mindset shift.
169.45 -> For example, there are no hooks on the server.
172.05 -> And above all, it’s not yet ready for prime
time, not quite yet.
176.39 -> But when it is (and that moment is coming
soon), I’ll be elated.
180.54 -> Because using the component mindset on the
server, with data flowing down the tree from
185.05 -> the layout, to pages, to components and finally
to the client…
188.209 -> I find that changes quite a few things from
what we’ve been used to up until now.
193.239 -> So watch this space, and I’ll see you … on
my website or in the next video!
Source: https://www.youtube.com/watch?v=xTp3xsjref0