I've recently migrated several of my websites (including https://www.vimfromscratch.com/) from self-hosted Rails apps to Next.js + Vercel stack.
I really didn't expect to enjoy the transition so much. There are things that impressed me deeply, let me share some of those.
Next.js is of course the popular React framework mostly used for websites with static content and server-side rendering these days.
TypeScript and SASS are both supported out of the box (you'll need to npm add sass).
Fast Refresh is a game-changer for me. Usually, I just split my screen with the editor on the right side and a browser on the left. This way I can edit my code and see the changes literally instantly even on my 2013-era Macbook.
ESLints rules that do their job and also educate you how to properly use Next.js. For example, it can suggest you use Script element ("next/script") instead of plain script tag which does some nifty optimizations.
Images are optimized for you as well to the point that it will convert and serve WebP images if the browser supports it but also fixes the cumulative layout shift. https://nextjs.org/docs/basic-features/image-optimization
Every time there's a link in a viewport it will preload it in the background (you should use the Link component to enable that).
Now Vercel is a hosting service for mainly frontend apps, which plays nicely with Next.js because they authored it.
First of all, it's completely free for a single developer.
It integrates with Github and other Git providers. And then it builds and deploys your code as soon as you push anything to the master/main page. The deployment of my 20+ post website takes 27 seconds.
You can also deploy separate branches to custom URLs to preview the changes before going prod.
Custom domains. The setup is absolutely hassle-free. You type your domain. It gives you the A and a CNAME records to put into your provider's DNS settings. In just 10 seconds after that, it automatically recognized the new DNS settings, refreshed the page, generated the SSL certificates, and that's it. The user experience is just so great, I have never seen anything like this before.
Oh, did I mention you get a FREE SSL certificate that is set up for you automatically in like 5 seconds?
More about domains. It also sets an automatic redirect for you from bare hostname to www, or the other way around if you want. Sounds like a small thing, but it's a nice touch.
Vercel has its own CDN network called Edge Network which means you don't need to additionally set up Cloudflare.
I should separately mention that the general website's UX and how things just work and how a lot of stuff is taken care of for you - all of this add up to a really nice impression 👏
I hope something from this post got you interested. Obviously don't hesitate to give it a try if you haven't already and make your own impression. I will definitely continue exploring, and I even think about trying out their serverless functions, but we'll see.
#Public #JavaScript #NextJS