ethanniser / NextFaster

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 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 model Deployment • Make sure the Vercel project is connected to a Vercel Postgres (Neon) database and Vercel Blob Storage • Run to apply schema to your db Local dev • Run to link your project to Vercel. • Run to get a file with your db credentials. • Run && 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 . • Create the default roles in your database. -Run -Now run CREATE ROLE default; and CREATE ROLE cloud_admin; • For DB migrations with : • Make sure is added to the env for dev • Run 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