An email client built with the Next.js App Router and Postgres.
Next.js Email Client
This is an email client template built with Next.js and Postgres. It's built to show off some of the features of the App Router, which enable you to build products that:
Navigate between routes in a column layout while maintaining scroll position (layouts support)
Submit forms without JavaScript enabled (progressive enhancement)
Navigate between routes extremely fast (prefetching and caching)
Get started quickly with Next.js, Postgres, Stripe, and shadcn/ui.
https://next-saas-start.vercel.app/
This is a starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users.
Follow the Vercel deployment process, which will guide you through setting up your project.
Add environment variables
In your Vercel project settings (or during deployment), add all the necessary environment variables. Make sure to update the values for the production environment, including:
BASE_URL: Set this to your production domain.
STRIPE_SECRET_KEY: Use your Stripe secret key for the production environment.
STRIPE_WEBHOOK_SECRET: Use the webhook secret from the production webhook you created in step 1.
POSTGRES_URL: Set this to your production database URL.
AUTH_SECRET: Set this to a random string. openssl rand -base64 32 will generate one.
Other Templates
While this template is intentionally minimal and to be used as a learning resource, there are other paid versions in the community which are more full-featured:
The repository backing React 2025 has been updated to match what React actually will look like in 2025.
This means it uses all of the latest React 19 features, as well as improvements in Next.js in the past 4 years. You can still use this repo as an archived reference, but I would recommend checking out the new repo to see the latest patterns.
A free video course for building static and server-side rendered applications with Next.js and React.
Hey, everyone! I'm Lee, the creator of Mastering Next.js. This course was originally released in 2019. Next.js has evolved quite a bit since v9 and some of this course is officially "outdated".
I've updated the course overview below to annotate which parts are up to date, which have changed, and what my new suggestions are. In my opinion, this is the ideal way to evolve this course. The videos will serve as a reference to a point in time, but newer additions to the framework make certain aspects much easier.
I taught Class Components in 2019 for those still in the process of converting to React Hooks. In 2021, it's now standard to use React Hooks for all projects and I would recommend starting there.
This repo shows how to deploy a Next.js app and a PostgreSQL database on a Ubuntu Linux server using Docker and Nginx. It showcases using several features of Next.js like caching, ISR, environment variables, and more.
You can then modify the email and domain name variables inside of the script to use your own.
Run the deployment script:
chmod +x ~/deploy.sh
./deploy.sh
Supported Features
This demo tries to showcase many different Next.js features.
Image Optimization
Streaming
Talking to a Postgres database
Caching
Incremental Static Regeneration
Reading environment variables
Using Middleware
Running code on server startup
A cron that hits a Route Handler
Deploy Script
I've included a Bash script which does the following:
Installs all the necessary packages for your server
Installs Docker, Docker Compose, and Nginx
Clones this repository
Generates an SSL certificate
Builds your Next.js application from the Dockerfile
Sets up Nginx and configures HTTPS and rate limting
Sets up a cron which clears the database every 10m
Creates a .env file with your Postgres database creds
Once the deployment completes, your Next.js app will be available at:
http://your-provided-domain.com
Both the Next.js app and PostgreSQL database will be up and running in Docker containers. To set up your database, you could install npm inside your Postgres container and use the Drizzle scripts, or you can use psql:
docker exec -it myapp-db-1 sh
apk add --no-cache postgresql-client
psql -U myuser -d mydatabase -c 'CREATE TABLE IF NOT EXISTS "todos" ( "id" serial PRIMARY KEY NOT NULL, "content" varchar(255) NOT NULL, "completed" boolean DEFAULT false, "created_at" timestamp DEFAULT now());'
For pushing subsequent updates, I also provided an update.sh script as an example.
Running Locally
If you want to run this setup locally using Docker, you can follow these steps:
docker-compose up -d
This will start both services and make your Next.js app available at http://localhost:3000 with the PostgreSQL database running in the background. We also create a network so that our two containers can communicate with each other.
If you want to view the contents of the local database, you can use Drizzle Studio:
bun run db:studio
Helpful Commands
docker-compose ps – check status of Docker containers
docker-compose logs web – view Next.js output logs
docker-compose logs cron – view cron logs
docker-compose down - shut down the Docker containers
docker-compose up -d - start containers in the background
sudo systemctl restart nginx - restart nginx
docker exec -it myapp-web-1 sh - enter Next.js Docker container
docker exec -it myapp-db-1 psql -U myuser -d mydatabase - enter Postgres db
A blazing fast, information dense media player built with Next.js.
A nice GUI for playing/viewing local media files.
Getting Started
git clone https://github.com/leerob/next-music-player
cd next-music-player
pnpm install
Running Locally
Use the included setup script to create your .env file:
pnpm db:setup
Add local audio files to a top level tracks/ folder (git ignored). One option to download files is yt-dlp. You can provide arguments to download the song metadata, as well as the cover image, too.
Run the following to install the required dependencies:
npm i
3. Set the environment variables
Create a .env.local file and set the following:
# Get your API key here - https://e2b.dev/?utm_source=github&utm_medium=referral&utm_campaign=readme&utm_content=fragments
E2B_API_KEY="your-e2b-api-key"# OpenAI API Key
OPENAI_API_KEY=
# Other providers
ANTHROPIC_API_KEY=
GROQ_API_KEY=
FIREWORKS_API_KEY=
TOGETHER_API_KEY=
GOOGLE_AI_API_KEY=
GOOGLE_VERTEX_CREDENTIALS=
MISTRAL_API_KEY=
XAI_API_KEY=
### Optional env vars# (on by default) Get your MORPH key here - https://morphllm.com/dashboard/api-keys
MORPH_API_KEY=
# Domain of the site
NEXT_PUBLIC_SITE_URL=
# Rate limit
RATE_LIMIT_MAX_REQUESTS=
RATE_LIMIT_WINDOW=
# Vercel/Upstash KV (short URLs, rate limiting)
KV_REST_API_URL=
KV_REST_API_TOKEN=
# Supabase (auth)
SUPABASE_URL=
SUPABASE_ANON_KEY=
# PostHog (analytics)
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=
### Disabling functionality (when uncommented)# Disable API key and base URL input in the chat# NEXT_PUBLIC_NO_API_KEY_INPUT=# NEXT_PUBLIC_NO_BASE_URL_INPUT=# Hide local models from the list of available models# NEXT_PUBLIC_HIDE_LOCAL_MODELS=
4. Start the development server
npm run dev
5. Build the web app
npm run build
Customize
Adding custom personas
Make sure E2B CLI is installed and you're logged in.
This will create a new file called e2b.Dockerfile.
Adjust the e2b.Dockerfile
Here's an example streamlit template:
# You can use most Debian-based base imagesFROM python:3.19-slim
RUN pip3 install --no-cache-dir streamlit pandas numpy matplotlib requests seaborn plotly
# Copy the code to the containerWORKDIR /home/user
COPY . /home/user
Specify a custom start command in e2b.toml:
start_cmd = "cd /home/user && streamlit run app.py"
Deploy the template with the E2B CLI
e2b template build --name <template-name>
After the build has finished, you should get the following message:
✅ Building sandbox template <template-id> <template-name> finished.
Add your new template to the list. Here's an example for Streamlit:
"streamlit-developer": {
"name": "Streamlit developer",
"lib": [
"streamlit",
"pandas",
"numpy",
"matplotlib",
"requests",
"seaborn",
"plotly"
],
"file": "app.py",
"instructions": "A streamlit app that reloads automatically.",
"port": 8501// can be null
},
Provide a template id (as key), name, list of
dependencies, entrypoint and a port (optional). You can also add
additional instructions that will be given to the LLM.
Where id is the model id, name is the model name (visible
in the UI), provider is the provider namehttps://github.com/e2b-dev/fragments and providerId is the provider
tag (see adding providers below).
%2C%20Tailwind%20CSS%2C%20Next.js%2C%20and%20Vercel.&demo-url=https%3A%2F%2Fswag.vercel.app%2F&demo-image=https%3A%2F%2Fuser-images.githubusercontent.com%2F9113740%2F160301066-c2e44eec-a0aa-4960-8644-3fc95bf8cb34.png)
