NextJS + Drizzle -- 8 Things I Learned Spinning up a New Project

The best way to learn is by building new stuff (for me, at least). I'm building Historio -- a web app to explore history through timelines and your favorite books. I'm intentionally learning a new stack and dev tooling along the way. I'm a month or so in -- here's what I've learned creating a new NextJS + Drizzle project from scratch.

Subscribe to Learn, Build, Teach {Repeat}!

1. Run TS files as a script from your terminal

To test and iterate on backend code, I've started calling some modules (like OpenAI researches) from scripts I execute via the terminal. Copious console.debug and console.warn statements make this a kinda effective way to debug without having to craft a frontend. To execute these scripts, I use TSX resulting in commands like this one that extracts events from history books:

npx tsx scripts/scriptProcessBook.ts

2. How NOT to execute async functions in series

Quiz: Will these async functions be executed in series or parallel?

_.range(10).forEach(async (idx) => doSomething())

The answer: In parallel, which is not what I wanted. Turns out the right answer is a good ole' fashioned for loop:

for (let i = 0; i < 10; i++)
 doSomething()

3. How to set common fields on all Drizzle models

One pattern I love with Django’s ORM is using abstract models to define fields that are re-used across models. This makes it easy to ensure models are consistent and core fields are predictable. To achieve a similar pattern with drizzle, I defined common fields in an object that gets spread in model definitions:

import { timestamp, uuid } from "drizzle-orm/pg-core"

export const BASE_SCHEMA_FIELDS = {
  id: uuid("id").primaryKey().defaultRandom()
}

// to implement in a model:
import { BASE_SCHEMA_FIELDS } from "./common"

export const books = pgTable("books", {
  ...BASE_SCHEMA_FIELDS,
  title: varchar("title"),
  author: varchar("author"),
  // ... additional fields
})

4. How to deploy a static site with Cloudflare pages

The way I deploy websites has evolved over time. My first sites were deployed by dragging a folder from my computer to a server with an FTP client; with git, I started using git pull on the server, followed by some bash scripts; the final evolution brought all of this into CI/CD pipelines that magically work most of the time and require so much grief to debug the rest of the time.

However, hose pipelines (even Github pages) are overkill if you merely want to deploy a static site.

I'm trying (and mostly succeeding) not to over-engineer Historio, and stuck to Cloudflare pages to deploy the initial landing page. It couldn't be easier. Literally just drag and drop a zip folder with a static site and boom it’s deployed.

The Rest!

Read about my other 4 learnings here, including how to set created and updated timestamps on Drizzle models that automatically get set when objects are created/updated. If you find this useful, subscribe to LBT{R} where I write about a range of web development and product management topics like this.

🤔 For the Commments

What were your first learnings with NextJS or Drizzle?