Next.js Email Client

Next.js Email Client is an open-source boilerplate template that pairs the Next.js App Router with Postgres to deliver a fully functional email client interface with search, threading, compose, and trash features.

What is Next.js Email Client?

Next.js Email Client is an open-source template by Lee Robinson (leerob) that demonstrates production patterns for the Next.js App Router. It takes a Postgres database seeded with sample emails and folders and renders a multi-column email client with search, thread views, a compose screen, and delete-to-trash. The app is deployed at Vercel and runs entirely on Next.js with server-side rendering and server actions.

Key Features

• Column layout navigation — Navigate between routes in a column layout while maintaining scroll position, using App Router layout support.
• Progressive enhancement — Forms work without JavaScript enabled because submissions are handled by server actions.
• Prefetching and caching — Routes load extremely fast thanks to Next.js prefetching and client-side caching.
• URL state — UI position is retained on reload by keeping state in the URL.
• Email search — Search across all seeded emails and see matching text highlighted in the results.
• Thread and compose views — List all threads, open each thread to read its emails, and create new emails in a compose view.
• Delete to trash — Move emails to trash from the thread view.
• Database setup scripts — Use pnpm db:setup, pnpm db:migrate, and pnpm db:seed to create the Postgres schema and populate sample data.

The tech stack includes Next.js as the framework, Postgres as the database, Drizzle ORM for database access, Tailwind CSS for styling, and shadcn/ui for React components.

Who is it for?

• Next.js developers who want a working reference for App Router features like layouts, server actions, and caching.
• Full-stack developers building an inbox-style product who need a head start on search, threads, and compose.
• Learners studying how a React framework integrates with a SQL database and an ORM like Drizzle.

What can you do with the template?

• Prototype an email app: clone the repository, run the setup script, and have a seeded inbox with folders and threads in minutes.
• Study App Router patterns: inspect how the column layout, URL state, and server actions are implemented in the codebase.
• Extend the client: add unimplemented features listed in the README, such as dark mode, keyboard shortcuts, Markdown support, and a dynamic side profile.

How does the template work?

Clone the GitHub repo, run pnpm install, then pnpm db:setup to create your environment file. Next, pnpm db:migrate and pnpm db:seed set up the Postgres schema and populate the database with emails and folders. Finally, pnpm dev starts the Next.js development server at localhost:3000.

FAQ

Is Next.js Email Client free?

The template is open-source and available on GitHub, so you can use it freely. The README does not specify a license, but the code is public and meant to be a starting point for your own projects.

What database and ORM does it use?

It uses Postgres as the database and Drizzle ORM to interact with it. The setup scripts create the schema and seed data automatically.

Does it include authentication?

No, authentication is not mentioned in the README. The template focuses on the email client interface and App Router features rather than auth.

What features are not implemented?

The README lists several unfinished items: making the side profile dynamic, supporting Markdown in emails, up/down arrow navigation for threads, global keyboard shortcuts, better date formatting, and dark mode styles.