The Next.js Email Client is an open-source email client template built with the Next.js App Router and Postgres, designed to demonstrate App Router features for building column-layout applications.
What is the Next.js Email Client?
The Next.js Email Client is an open-source template that implements a functional email client using the Next.js App Router and Postgres. It takes a Postgres database seeded with emails and folders and produces a three-column web interface for reading, searching, composing, and deleting threads. The template runs on Vercel and is created by Lee Robinson (leerob).
Key Features
- Column layout — The App Router layouts support a column-based email interface where each route maintains its own scroll position, similar to Gmail or Outlook.
- Progressive enhancement — Forms for actions like composing and deleting are designed to work without JavaScript enabled, thanks to server actions.
- Fast navigation — Prefetching and caching in the App Router make route changes between the mail, thread, and compose views nearly instantaneous.
- URL state — The UI automatically restores your position on reload by encoding selected threads and folders in the URL.
- Search with highlighting — Search across emails is implemented, and matching text is highlighted in the results.
- Profile sidebar — A sidebar displays user information and folders in the seeded demo data.
- Thread management — You can view all threads, open every email in a thread, compose new emails, and delete threads to trash.
- Tech stack — Built with Next.js, Postgres, Drizzle ORM, Tailwind CSS, and shadcn/ui components.
Who is it for?
- Next.js developers — Learn how the App Router handles layouts, server actions, caching, and URL state by reading and modifying a real application.
- Startup teams — Use the template as a starting point for building a custom email client or similar column-based dashboard without designing the UI from scratch.
- Educators and workshop leaders — Demonstrate modern React server component patterns in a concrete project with a running demo and seeded data.
Use cases
- Developers prototyping an email client: clone the repo, run the setup script, and get a working Postgres-backed mail interface with search and compose in minutes.
- Teams building internal dashboards: adapt the three-column layout and URL state handling to manage records, tickets, or documents.
- Students learning the App Router: study the implementation of progressive enhancement and prefetching in a non-trivial app with a demo at next-email-client.vercel.app.
How does it work?
The template uses a setup script (pnpm db:setup) to create your environment file, then pnpm db:migrate and pnpm db:seed populate the Postgres database with emails and folders. After running pnpm dev, the App Router serves the client at localhost:3000, with server components fetching data from Postgres via Drizzle.
FAQ
Is the Next.js Email Client free?
Yes, it is an open-source template on GitHub, so you can use, modify, and deploy it freely. The demo is hosted on Vercel at next-email-client.vercel.app.
What database does it use?
It uses Postgres with Drizzle ORM. The included seed script creates emails and folders so the app works immediately after setup.
Does it support Markdown in emails?
The GitHub readme lists "Support Markdown?" as an unimplemented item, so Markdown rendering is not currently available.
What features are not implemented yet?
Based on the readme's checklist, the side profile, global keyboard shortcuts, dark mode styles, and better date formatting are not yet implemented. The checkboxes for those items are unchecked in the readme.
