ethanniser/NextFaster

A highly performant e-commerce template using Next.js

NextFaster

A highly performant e-commerce template using Next.js and AI generated content by @ethanniser, @RhysSullivan and @armans-code

Design notes

Check out the detailed twitter thread

• Uses Next.js 15
  • All mutations are done via Server Actions
• Partial Prerendering is used to precompute the shells of pages
  • When deployed, these are served statically from the edge
  • Dynamic data (such as cart information) is then streamed in
• Uses Drizzle ORM on top of Neon Postgres
• Images stored on Vercel Blob
• Used v0 to generate all initial UIs, check out some of the threads we were particularly impressed by:
  • v0 makes pretty impressive search dropdown without a library
  • recreating 'order' page
  • recreating 'login' page

AI

• Used OpenAI's gpt-4o-mini with their batch API and the Vercel AI SDK to generate product categories, names and descriptions
• GetImg.ai was used to generate product images via the stable-diffusion-v1-5 model

Deployment

• Make sure the Vercel project is connected to a Vercel Postgres (Neon) database and Vercel Blob Storage
• Run pnpm db:push to apply schema to your db

Local dev

• Run vc env pull to get a .env.local file with your db credentials.
• Run pnpm install && pnpm dev to start developing.
• The data/data.zip includes a ~300 MB data.sql file with the full schema and 1,000,000+ products (Note, the data exceeds the size limit allowed by the free tier for Neon on Vercel see more). To seed Vercel Postgres with this data:
  • Unzip data.zip to data.sql.
  • Run psql "YOUR_CONNECTION_STRING" -f data.sql.
• For DB migrations with drizzle-kit:
  • Make sure ?sslmode=required is added to the POSTGRES_URL env for dev
  • Run pnpm db:push to apply schema to your db

Performance

PageSpeed Report

Costs

This project is hosted on Vercel, and uses many of the features of the Vercel platform.

Here is the full breakdown of the cost of running this project from Oct 20th 2024 through Nov 11th 2024.

During that time, the project recieved over 1 million page views across 45k unique users. The site has over 1 million unique pages and images*.

*images are unique by url (and caching) although not unqiue in their content

Summary:

• ~1 million page views
• ~1 million unqiue product pages
• 45k unique users
• $513.12

Is $500 a lot for hosting this site? It depends, in this instance if it was a real ecommerce site that hosting cost would've been made back in the first 10k visitors.

It is likely possible to optimize these costs further if that is your goal, however that wasn't a priority for this project. We wanted to try and build the fastest possible site, quickly. We definitely achieved that goal without ever having to think about infra once.

These numbers are also on top of the Vercel pro plan, which is $20/contributor/month.

We would like to thank Vercel for covering the costs of hosting this project.

Compute and Caching

These costs represent the core functionality of serving the site.

Resource	Included	On-demand	Charge	Notes
Function Invocations	1M / 1M	+31M	$18.00
Function Duration	1,000 GB-Hrs / 1,000 GB-Hrs	+333.7 GB-Hrs	$33.48	Using In-function Concurrency reduces our compute usage by over 50% (see image below)
Edge Requests	10M / 10M	+93M	$220.92
Fast Origin Transfer	100 GB / 100 GB	+461.33 GB	$26.33
ISR Writes	2M / 2M	+12M	$46.48
ISR Reads	10M / 10M	+20M	$7.91

Total: $353.12

Images

These costs represent the image optimization done by Vercel.

Resource	Included	On-demand	Charge	Notes
Image Optimization	5000 / 5000	+101,784	$160.00	This represents the number of distinct source images used on the site and optimized by Vercel. Each of the 1 million products has a unique image. The reason this number is less than 1 million is because the optimization is done on demand and not all pages have been visited.

Total: $160.00

Even More Info