Building This Website Using Next.js
These past few days I've mostly spent building this website that you're on now. While I've had a few different personal websites in the past, they've always been minimally styled, usually built on top of a static site generator, and with very little actual content on them. This time I wanted things to be different and so I set out to build a website with a stack that I was entirely responsible for so that I could grow into as my needs changed. Eventually I settled on building everything using Next.js. I had never really used the framework before (or any React-esque framework for that matter) to do anything beyond messing around, so I figured it would be a good opportunity to give my initial impressions of building a Next.js application after my first 48-hours of use.
Background
My journey with trying to build a personal website began many year ago at this point, but with every revision I did I was never satisfied with the result, whether that was because of the tools I was using, the design of the site, or the content on it.
When I sat down to approach the problem again, I was once again presented with the immediate question of what exactly my stack would be comprised of. In the past I'd used both Hugo and Zola, but didn't love how restrictive their data models were when it came to structuring my sources. That experience led me to attempt to (brace yourself) write all the HTML and CSS from scratch (*shivers*). I figured for a fairly tiny, static site that couldn't be that bad, but am now convinced that there will truly never be a world in which it is even remotely enjoyable to write HTML and CSS from scratch. No amount of sass or hand-rolling of Tera templates made the sheer amount of boilerplate, code-reuse, and side-effects managable.
At that point I decided I needed to approach my website as a more serious project. Between how incapable vanilla Javascript seemed every time I had to write it in the past, the quirkiness of trying to use front-end Javascript frameworks, and having a predominantly Rust background, I settled on writing a full-stack Rust application using Leptos and Dioxus. While I sure hope that years from now WASM will be mature enough to solve how much of a franken-language Javascript has become, it became clear to me that writing full-stack Rust is just like writing Rust, for all of its strengths and weaknesses, but with the added challenge that that the thing you're writing it for really doesn't want to be running it. Eventually the tooling and tempermental interoperability got to me, and I realized I didn't have the stamina to finish out the project. For years my old, Zola-based, personal website just sat there until finally the spark reignited in me to have my own place to share things online.
When I sat down to approach the project this time around, however, I'd been much more aware of how the web development world was shifting in the months prior. In everything that I saw, one name kept coming up over and over again as a project that other developers seemed enthusiastic about, and that made me feel like maybe this website was worth another go. That project was Next.js. In doing further research, Next.js quickly felt like the natural fit between its capability as a full-stack development tool, ease of use, and enthusiastic adoption of typescript, which was the only thing that made the thought of writing javascript somewhat palatable to me.
The Ugly: Drowning In Config Files
One thing I've never enjoyed about React, and that struck me very quickly in using it again was how, for some ungodly reason, pretty much everything needs its own config file, and everything does it differently. Coming from Rust I'm definitely a bit spoiled because Cargo just handles pretty much everything for you (for better and for worse), and it's rare to come across anything that's not written in TOML, but having four different package managers to choose from, multiple post-processing steps, multiple variants of the same language, multiple ways of writing the sources for those languages, multiple ways of specifying dependencies, and multiple configuration languages is incredibly confusing. Thankfully I think I eventually managed to wrap my head around things and simplify the Next.js boilerplate I started with, but it did take rewriting everything in purely Typescript, switching over to pnpm, and configuring as much as I could inline instead of in a separate config file before I felt happy with the state of my repository.