Logo

dev-resources.site

for different kinds of informations.

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

Published at
11/1/2024
Categories
nextjs
drizzle
cloudflare
react
Author
jordanahaines
Categories
4 categories in total
nextjs
open
drizzle
open
cloudflare
open
react
open
Author
13 person written this
jordanahaines
open
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()
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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?

drizzle Article's
30 articles in total
Favicon
Setting Up Drizzle & Postgres with tRPC and Next.js App
Favicon
Placegoose: Building data APIs with HONC
Favicon
Quick REST API with Hono JS and Drizzle ORM
Favicon
Remix Drizzle Auth Template
Favicon
Resolving the `DO $$` Issue in Drizzle ORM with Nile Postgres
Favicon
How to use ORMs (Prisma / Drizzle / Knex.js) in a TypeScript backend built with Encore.ts
Favicon
NextJS + Drizzle -- 8 Things I Learned Spinning up a New Project
Favicon
How to integrate Drizzle ORM with Nest Js
Favicon
Build Nextjs 15 & React 19 Dashboard App Step By Step
Favicon
Verifying Lemon Squeezy Subscription Webhooks in Cloudflare Workers
Favicon
Drizzle Vs Prisma
Favicon
Nuxt3 x MySQL (& Drizzle ORM)
Favicon
Building a Scalable REST API with TypeScript, Express, Drizzle ORM, and Turso Database: A Step-by-Step Guide
Favicon
Prisma vs. Drizzle: A Comprehensive Guide for Your NextJS Project
Favicon
Next.js authentication using Clerk, Drizzle ORM, and Neon
Favicon
I created basic analytics with Vercel Postgres, Drizzle & Astro
Favicon
How to Write a SQL Subquery with Drizzle ORM
Favicon
Drizzle ORM in a Supabase edge function
Favicon
Drizzle or Prisma? I Built an App Twice to Find Out Which Is Better
Favicon
Drizzle ORM, NextAuth and Supabase
Favicon
Drizzle ORM SQLite and Nuxt - Integrating Nuxt Auth, Part 2
Favicon
Drizzle ORM SQLite and Nuxt - Integrating Nuxt Auth, Part 1
Favicon
Drizzle ORM, SQLite and Nuxt JS - Getting Started
Favicon
How I implemented Drizzle ORM with Nextauth
Favicon
How to Build a Contextual Chatbot with LangChain and PostgreSQL + Drizzle ORM
Favicon
Building a full stack app with Remix & Drizzle ORM: Drizzle Relations & Deployment
Favicon
Building a full stack app with Remix & Drizzle ORM: Upload images to Cloudflare
Favicon
Building a full stack app with Remix & Drizzle ORM: Project setup
Favicon
Building a full stack app with Remix & Drizzle ORM: Folder structure
Favicon
Building a full stack app with Remix & Drizzle ORM: Register & Login users

Featured ones: