I felt a bit burned last time I seriously tried to get into modern full-stack typescript web frameworks. Part of this was also inexperience, but there is things that are objectively much better now:

• Frameworks and tooling are better

• … and more stable

  i.e. pnpm exists so i can finally stop staring at a spinner for minutes every time i need to install packages

• LLMs are good at writing React (specifically!)

• Antropic claude is really good at fixing typescript linter issues

• … and screwed up React hooks / prop drilling / etc.

• … and npm package shenanigans

• … and auto completing TS method signatures

Also I finally figured out how to do “select typescript version” in vscode so my LSP actually works (haha, oops)

A tiny project

So anyway I chugged a whole Pack of Kool-Aid and speedran making this super niche CRUD app by using Vercel, Clerk and Supabase.

The Vercel Postgres offer is weird, so I’m just cross cloud connecting to a supabase postgres url for now. This is not great, but this whole project is goofy anyway, so whatever.

React server components make sense to me. I did not care about performance considerations, but being able to put the S3 file uploading logic there to keep it simple was nice.

Should they have been named server side rendering components?

For a beginner, it is sometimes a bit confusing to have literally the same files be backend and frontend, but as a somebody who has written a few webapps in various ways, I understand the upsides of that, and the error messages are nice and clear.

Anyway, my app worked in a few hours and it was trivial to deploy including domain setup etc.

Clerk

Depending on the context, I am a third-party-service-hater on principle, and I have done my own auth a couple times, and it is not a huge deal. But it turns out that clerk is a really good offering, they made every single step for me as a dev nicer than using most consumer-facing apps. So credit where due!

NextJS build is slow

Configuring this helps: (thanks t3.gg)

next.config.js

	 typescript: {
	 	ignoreBuildErrors: true,
	 },
	 eslint: {
	 	ignoreDuringBuilds: true,
	 },

This speeds it up to “only” 1 minute. It also results in some breakages not being clearly errored anymore. So sometimes, I had to comment these out, before then running pnpm build locally to get the errors I needed, so that I could then fix stuff I screwed up in the app router. That was the only time I felt a bit lost.

Unrelated, there was a some typescript Linter errors that took minutes of compilation (every time) to finally surface, but the routes worked fine without fixing them. (I am guessing that to a typescript expert, this is normal..?)

Import fixing using LLMs is slow

I really missed Golang’s immediate enforced automatic reformatting and package importing on saving a file. Fixing imports “by hand” feels surprisingly horrible!

Maybe I can get Vscode to do this for me somehow..?

settings.json

    "editor.codeActionsOnSave": {
        "source.organizeImports": "always",
        "source.addMissingImports": "always"
    }

EDIT: Ok yes, that finally works (and not break my CTRL+S this time). Works really well in fact! Nice