Coding, Insights, and Digital Discoveries šŸ‘©šŸ»ā€šŸ’»

From Stay-at-Home Mom to a Developer After 50

Published on

Future-Proofing My Next.js Blog: Navigating Domain and Hosting Choices

ai-automation-wine

So here I am, with my Next.js blog up and running on Vercel, feeling pretty good about how things are shaping up. But now itā€™s time to take that next stepā€”giving my blog its own unique domain. Something memorable, without that ā€œvercel.appā€ part at the end. I heard Vercel could get really costly when traffic picks up. So my question is do I keep everything in Vercel, or venture over to a classic registrar like Namecheap for my domain? What seemed like a small choice is quickly turning into a rabbit hole of considerations, especially if Iā€™m thinking about SEO, speed, ease of management, and the long-term costs if this blog really takes off.

Mapping Out What I Really Need

First things first, I need to clarify what I really want out of this setup. Cost is a big one, for sure. Iā€™m all for paying a bit more if it means a smoother experience, but Iā€™d prefer to avoid any nasty billing surprises down the road, especially if my traffic starts picking up. Then thereā€™s ease of deploymentā€”Iā€™ve been spoiled by Vercelā€™s auto-deployments from Git, and I donā€™t want to give up that luxury. And daily management? Ideally, everything should be simple and streamlined. The less time I spend bouncing between different dashboards, the better. Plus, I want to make sure the blog loads fast for readers around the world, with strong SEO and security built in.

Should I Choose Vercel's Domain?

Starting with Vercelā€™s domain service is tempting since Iā€™m already hosting the blog there. The idea of keeping everything in one place sounds easyā€”no extra accounts to manage, no jumping back and forth between services. The cost for a .com domain is around $12 a year, which isnā€™t bad and even includes free WHOIS privacy. But thereā€™s a catch here: while the domain cost is pretty standard, Vercelā€™s hosting charges can increase as traffic spikes since the pricing is based on usage. Paying more for success is fine, but Iā€™d rather avoid sudden budget surprises that could throw me off.

Itā€™s hard to ignore how well Vercel integrates everything into one neat package. The Git-based automated deployment is like magicā€”every push to the repository gets deployed instantly. Plus, thereā€™s a global CDN, built-in image optimization, caching, and prerendering features that are great for speed and SEO without me having to mess with configurations. The DNS setup is also straightforward; while itā€™s not the most advanced (lacking DNSSEC, for instance), it still gets the job done with basic DDoS protection in place. That said, if I hit a domain-related snag, Vercelā€™s support might not be as domain-focused as Iā€™d like.

Whatā€™s Good About Namecheap?

Then thereā€™s Namecheap, the trusty, old-school domain registrar thatā€™s been around forever. Itā€™s a bit cheaper to start, costing around 9forthefirstyearandthen9 for the first year and then 13 annually with free WHOIS privacy. More importantly, the pricing is fixedā€”no surprises if my blog suddenly goes viral. And even though Namecheap is purely a domain registrar, I donā€™t have to give up my precious Git deployment; Iā€™d still handle that through Vercel. However, using Namecheap would mean managing my domains separately from my hosting, which isnā€™t ideal but isnā€™t the end of the world either.

What makes Namecheap appealing is its deeper domain management options, like DNS customization and DNSSEC support, which adds an extra layer of security. Plus, they have excellent domain-focused support, which Iā€™d appreciate if any issues come up. As for SEO and speed, using Namecheap as the registrar while hosting on Vercel still allows me to leverage Vercelā€™s global CDN and performance optimizations. Iā€™d just need to make sure my DNS records are correctly set up.

The more I think about it, the more I realize that going with Namecheap for domains and Vercel for hosting might be the smarter move in the long run. Keeping my hosting and domain registration separate gives me more flexibility. If Vercelā€™s hosting costs start to climb due to traffic growth, I wonā€™t be tied downā€”I can easily switch to a different host without having to deal with domain transfer headaches. In other words, Iā€™m future-proofing myself here.

What are Other Alternatives?

Now that Iā€™m leaning towards Namecheap for my domains, I should have a plan in place for when hosting costs might become an issue as my traffic grows. Vercel is great while my site is relatively small, but as my blog (and potentially other projects) scale, I need a contingency plan. After all, Vercelā€™s usage-based pricing model could get costly as traffic increases. So if hosting with Vercel becomes too expensive, Iā€™d need to migrate to an alternative that still supports Next.js, but with a more predictable pricing structure.

Iā€™ve already started to shortlist some options. Netlify is the first one that comes to mind. Itā€™s similar to Vercel in many ways, optimized for modern web frameworks like Next.js, with a global CDN and automatic deployments based on Git. Whatā€™s nice is that their paid plans offer a more predictable pricing structure compared to Vercelā€™s pay-as-you-go model, which could be more affordable as traffic scales. While it may not be as tightly integrated with Next.js as Vercel is, it would still be a strong contender for hosting static or JAMstack sites.

Another option would be the DigitalOcean App Platform. Itā€™s a bit more hands-on but offers fixed monthly pricing, which I like because of its predictability. If needed, I could go with a traditional VPS setup using DigitalOcean or similar providers like Linode or Vultr. This would give me full control over server configurations at a lower cost, but Iā€™d have to deal with server management and scaling myself. Still, having that level of control isnā€™t a bad thing, especially when considering custom server configurations or optimizations.

Iā€™ve also thought about AWS Amplify, which could be useful given its integration with other Amazon Web Services. It offers serverless functions and a global CDN, similar to Vercel, but the cost structure can be a bit tricky, especially when using multiple AWS services. It would require more careful monitoring of usage and pricing to avoid unexpected costs.

Cloudflare Pages is another interesting option. Their pricing is predictable, and they have a great global CDN with built-in security features. The only downside is that itā€™s mainly designed for static sites or JAMstack applications, and while it does support Next.js, it doesnā€™t natively handle server-side rendering (SSR) as smoothly as Vercel does. Still, for most cases, it could be a viable alternative.

If Iā€™m ever looking for the most control and lowest possible cost, self-hosting with a VPS (like Linode or Vultr) could be the answer. I could set up a server environment for my Next.js apps using Docker, with NGINX as a reverse proxy for better performance. Of course, this means taking on the responsibility of server management, but the trade-off would be lower hosting costs and more control over my infrastructure.

Come to My Decision

The plan is simple: stick with Vercel for now, while everything is small and manageable, and enjoy its seamless integration and deployment workflow. But if costs start getting out of hand, Iā€™ll be prepared to switch to an alternative like Netlify or DigitalOcean for a more predictable and scalable solution. And by choosing Namecheap for domains, Iā€™m keeping things flexible and future-proof, ensuring that if I ever need to change hosts, my domain is not locked into a specific service.

Now, Iā€™m ready to get my Namecheap domain connected to Vercel. Iā€™ll start by adding my domain to Vercelā€™s dashboard, update my DNS settings on Namecheap, and verify everything on Vercel. Itā€™s a few extra steps, but nothing too complicated. If I want a subdomain, Iā€™ll add a CNAME record in Namecheapā€™s DNS settings. Once everythingā€™s verified and tested, my blog will be live on its own domain.

The How-To Guide: Connecting My New Namecheap Domain to Vercel

Now that Iā€™ve chosen Namecheap, hereā€™s my plan to hook it up to my Vercel-hosted Next.js blog. Step-by-step, hereā€™s what Iā€™ll do:

Prerequisites:

  • Namecheap Account: with a domain already registered.
  • Vercel Account: with my Next.js blog hosted.

[!note] When you add a domain to Vercel, Vercel can provide either:

  • Nameservers to use (if using Vercelā€™s DNS).
  • A record information (IP address, usually) to add if using an external DNS provider (like Namecheapā€™s DNS).

Step 1: Add the Domain on Vercel

  1. In Vercel, go to Settings > Domains under my project.
  2. Enter my new domain name sailingdigital.online and click Add.
    • Vercel will give me specific nameservers or an IP address, depending on what type of DNS setup I need. When I set up this domain with vercel, it recommended adding an A record, that means Iā€™ll be setting up Namecheap's DNS to point to Vercel using this specific A record, rather than using Vercelā€™s nameservers.

Step 2: Update DNS Settings on Namecheap

  1. In Namecheap, I head to Dashboard > Domain List, find my domain, and click Manage.
  2. In the Nameservers section, I select Namecheap BasicDNS.
    • If Vercel gave me nameservers: I'll select "Custom DNA" instead of "Namecheap BasicDNS" and paste them here, then save.
    • If Vercel gave me an IP: I go back one level higher to Advanced DNS, this is what happend to my case.
      • Add a new A Record with @ as the host and paste Vercelā€™s IP in the Value field.
      • Save and move on.

Step 3: Verify the Domain on Vercel

  1. Back on Vercel, I hit Refresh or Verify next to my domain.
    • This step checks that everything is set up correctly, though it might take a few minutes (or even hours) due to DNS propagation.

Step 4: Adding Subdomains (Optional)

If I want a subdomain (like www.mycoolblog.com), Iā€™ll set it up here:

  1. In Namecheapā€™s Advanced DNS:
    • Add a CNAME Record.
      • Host: www
      • Value: my main domain or the Vercel URL Vercel provided.
  2. Save and verify on Vercel, just like before.

NOTE

I did something wrong here when setting up the domain with vercel. I mistakenly use www.sailingdigital.online, the subdomain as my preferred version of domain, which is not my intention. Here is how I correct it, go to vercel's domains page, change sailingdigital.online to no-redirect, and www.sailingdigital.online to be with redirect.

The main point here is that the preferred domain (sailingdigital.online) should have a Type A record with a host of @, while the redirect url should have a Type CNANE record with the hose of www. Since I use NameCheap for domain regitration and vercel for hosting, these two shouldn't have conflict over this setup. I did this wrong at the initial stage by accident, the Google Search Console had difficult time to crawl all my pages and index them.

Step 5: Test It Out

Finally, time to test the connection! I typed my new domain in a browser to check that everything loads correctly. I also typed the subdomain with www prefix, and it redirect to my domain smoothly. And voila! My blog is now live on its own with this shinny custom domain.

Choosing this setup not only works for my current needs but also keeps me prepared for the future. Iā€™m setting myself up for growth with predictable costs and flexibility to expand my digital presence across multiple sites. If after this blog I start an e-commerce site, or a portfolio for freelancing jobs, Iā€™ll be ready to adapt as things evolve. Now, itā€™s time to get back to creating awesome content and let the tech side run smoothly in the background.

ā† See All Posts