Finally, I pulled the trigger and bought the domain thelamppost.dev. There is something about the "naming of things" in software design that gets me stuck for a while (I think there is something final about it that makes me dither over whether its the "right" name or not!).
I ended up purchasing the domain from Cloudflare, and I initially attempted to host it using their service too, but it just didn't feel quite as smooth as I'd hoped. This led me to Netlify. I just signed up for a free account, authorized access to my repo on GitHub, and it started to build and deploy.
It didn't work of course 🤣...but that was because I had a whole host of linting errors. Mostly due to unused imports and unescaped quotes. So I fixed them up (and ignored some...) and ready to ship! Well...not quite. It still needed to be configured to use my custom domain (thelamppost.dev) and that required some extra steps. Apparently if you have your domain managed by Netlify they do all this for you, but I don't, so it didn't 😄.
First you need to tell Netlify that you want to add a custom domain that you are bringing (like in my case, it is from Cloudflare). They have great docs on how do this, found here. In short, you go to your site settings in Netlify, select "Domain management", and then click "Add custom domain". Enter your domain name (e.g., thelamppost.dev) and click "Verify". It will check if the domain is available and then prompt you to add it. However, since it is ours you'll need to do some setup on the other side to wire things up correctly with Netlify's load balancing server. The only real thing you need to remember is the IP that they provide you in the config (again, this is all in their docs).
The big thing was going to Cloudflare and setting up DNS records to point to the name server provided by Netlify. So head over to the "Account Home" for Cloudflare (I'm assuming since you've purchased a domain, you have an account 😆). Then, select the domain you intend to use. In my case, this was "thelamppost.dev".
Next, you'll see options in the sidebar menu for "DNS". Select that option.
Finally, you'll need to add "A" records for your domain to connect it to Netlify. Create two new entries, one for the root domain and one for the "www" subdomain. Netlify's configuration page will provide you with the IP addresses to use. Make sure to set the "Proxy status" to "DNS only" (the orange cloud icon should be greyed out). This is because Netlify will handle the SSL certificate for you, and if you proxy it through Cloudflare, it will cause issues (or at least it seemed to for me).
After this, the HTTPS and TLS certs all seemed to resolve quickly and it was good to go!
Since this is dynamic, I sure hope the site is up when you're viewing this 😆!
I made a few other changes, but mostly it was about changing my flow on Git. I decided to do my work all on a local dev branch, and only push to main when I had made significant changes. There are limits to the free tier of Netlify, so I don't want CD to ship every little change I make. All in all, if you're just trying to get a NextJS site hosted and running on Netlify, this should get you setup and moving. They do so much of it for you that it's pretty clicky-clicky. Until next time!
