Building an email client with the Next.js App Router & Postgres

Robinson started with Create Next App, Tailwind, and pnpm, then used v0 to generate a three-column layout in seven iterations. He put the folder list and email list in a shared layout, while the selected email appears in a nested route. This keeps the list's scroll position when moving between messages.

The app uses Vercel Postgres with SQL in tagged template literals, passing folder names and email IDs as values. Email data is fetched in the page or component that needs it. The list query treats the sent folder separately, and Robinson notes that its sender and recipient lookup could use a better join.

The compose page uses a server action and loads known email addresses for a keyboard-friendly React Aria typeahead, while still allowing new addresses. HTML required fields provide client-side validation, and the server action validates the submitted values with Zod. A Command+Enter shortcut submits the form.

The demo uses a hard-coded sender and a Postgres transaction to find or create the recipient, insert the email, and add it to the sent folder. The transaction commits on success and rolls back on failure. Afterward, the app revalidates data and redirects to the new email.

Robinson demonstrates that sending still works with JavaScript disabled, though the address typeahead is unavailable. He keeps components, server actions, queries, types, formatting utilities, and SVG icons together in the app folder. He highlights preserved scroll position and progressive enhancement as useful patterns.