Building a Blog with Next.js 13 and React Server Components
maxleiter.com
maxleiter.com
I’m very experienced on UI and I’ve been team lead on projects shipping apps that are used by millions of users. Have experience on SPAs and server rendered.
All this level of complexity just seems too much.
Am I missing something? Why would I choose nextjs? Convince me since everyone seems to love this over engineered stuff.
I personally find Next.js to be a simplicity (and this article to be contrived and overcomplicated)
What I personally like:
The React router system is greatly simplified with all scaffolding removed in favor of a Link tag more similar to html’s a tag
Folder structure based API system that has no vendor locking, just standardization to what REST best practices already are, instead of relying on everyone having that discipline
Ability to deviate for other network communication paradigms if its important
some other things, but really it just simplifies what many of us already learned to do, and thats what most languages and frameworks do for the time period they were released in.
- Great routing system.
- React. Easy to debug, fast to develop.
- In-built Serverless API support.
- Good third-party developer support and documentation.
- Fast. Can do SSG/SSR/ISR and everything in-between.
Doesn't really take much to know why Next.js is cool.
What's there to convince? You already know the truth.
Other than that, it is the best example of over engineering I've seen in my life.
On one hand, it's nice to have a static site I can host for free on S3. And it's nice to have a React website where I can do front end UX things like sticky navigation on page changes.
On the other hand, I really don't recommend anyone actually try to use Next.js as a day-to-day blog. Just use Wordpress or Ghost or Substack or something with a CMS. It's fine for a personal site where I post something twice a year. But for anyone who is more interested in improving their writing than their web development skills, just use a CMS or a hosted blogging platform.
Where I did struggle in this migration was I got sucked into contentlayer (the template I got "inspired" by used it) and it was a total time sink. Instead removed contentlayer and just loaded whay I needed and it was a lot smoother. Same with preact. Just keeping up with dependencies got easier by removing preact and contentlayer.
I agree it’s a terrible idea if you just want a blog. My motivation was to improve my web dev skills and have a low stakes playground to try stuff, since I’m using Next on most of my projects.
However, it is nice that if I ever want some quirky feature on my personal site, the world is my oyster. That may have been true for Jekyll but I don’t know Ruby well.
This is the primary purpose for most people. I have no concerns whatsoever about “over engineering” personal projects.
It feels like a dead end continuing working with jekyll as it feels like it's become all but abandoned.
Either Astro or Eleventy are my choices these days.
Personally I use Next/React along with all the fun stuff that goes with it for basic personal sites because it’s the same stack I use at my day job and I can be productive quickly. The skills are transferable, I frequently learn something while working on a personal project that I can apply to a work project, and vice versa. That part is very valuable to me.
Are the big projects using Next because it's useful or because it's trendy? (Maybe that's the wrong word, it's "trendy" with some staying power, like Apple.) Sometimes, particularly when caught in a difficult upgrade cycle, Next is more trouble than it's worth. I'm don't know if that's the case now.
It is a marketable skill, that's for sure. I just don't know if you should choose a framework just because it's popular.
I've use almost most frameworks out there over decades, currently Next feels like the most productive. My wish list for it includes better static typing of api routes like trpc. A first class solution, like DI maybe for structuring backend code and accessing it via api or props.
Yes, isomorphic JS.
With React it can be annoying if you have a component that you never intended to run on the server and you get a hydration warning. It also complicates the decision of what language to use on the backend. It is often useful though.
> To address the React-sized elephant in the room: you do not need this fancy setup to build a blog. HTML and CSS may be a better choice for you, but I'd find little fun in that, and I'm a strong believer in having a website to experiment with.
It's too bad Chrome inspector isn't convenient on mobile, it has a toggle that would make this no longer very useful for testing out your own site. On desktop it is very easy to switch with Chrome inspector - just for one site.