$ show ethanniser/NextFaster
NextFaster is a high-performance e-commerce template built with Next.js 15, designed to demonstrate the capabilities of Partial Prerendering (PPR), server actions, and the Vercel platform. It features over 1 million AI-generated art supply products with categories, subcategories, and product pages. The application uses Drizzle ORM on Neon Postgres for data storage, Vercel Blob for image hosting, and Upstash for rate limiting. Authentication is handled via JWT sessions with bcrypt password hashing. The architecture follows a monolithic Next.js app router pattern with server actions for all mutations (cart, auth). Pages are rendered using PPR: the static shell is precomputed and served from the edge, while dynamic data (cart count, user state) is streamed in. The site leverages Incremental Static Regeneration (ISR) for caching product pages and uses a custom prefetching system that preloads images on link hover via an API route that parses target page HTML. Key features include a search dropdown with full-text search (tsvector) and ILIKE fallback, a cookie-based cart, user authentication with sign up/sign in, and an order page with cart summary. The codebase demonstrates advanced Next.js patterns including React 19's useActionState, Radix UI primitives for accessible components, and the Effect library for concurrent data generation scripts.
The LLM identified 5 files worth highlighting for reuse:
Combines Next.js unstable_cache with React's cache function to provide deduplication of concurrent cache calls. A small but effective pattern for preventing redundant async cache operations in server-side rendering.
Provides a validatedAction helper that wraps Next.js server actions with Zod schema validation. Extracts common validation boilerplate and returns typed error states. Reusable in any Next.js project using server actions.
An API route that fetches a page, parses its HTML using linkedom, and returns metadata of all images in <main>. Used for prefetching product images on link hover. Demonstrates a clever server-side image prefetching strategy that can be extracted for performance optimization.
A custom Link component that extends Next.js Link with intelligent prefetching: uses IntersectionObserver to trigger route prefetch and image prefetch when a link comes into view, with a 300ms debounce. Also prefetches on mouse enter and handles client-side navigation on click. Demonstrates advanced performance optimization techniques.
Self-contained session management using JWT (HS256) with bcrypt password hashing. Provides hashPassword, comparePasswords, signToken, verifyToken, getSession, and setSession functions. Cleanly abstracts authentication concerns and can be reused in any Next.js application.