Infinite scroll with Next.js, Framer Motion, and Supabase

Summary

The post presents a tutorial for displaying Supabase Launch Week tickets with infinite scrolling in a Next.js page instead of loading every ticket at once. It fetches an initial batch of 20 tickets in getServerSideProps, then listens for window scroll events with a 200-millisecond Lodash debounce and checks the ticket container’s bottom against the viewport height. When the container reaches the viewport, Supabase range queries retrieve successive 20-ticket pages using an offset, and the results are appended to the existing list. Framer Motion animates each ticket from opacity 0 and y 20 into place, with index-based delays intended to create a staggered appearance. The tutorial also sets an isLast state when a response is shorter than PAGE_COUNT so scrolling can stop after the available tickets are loaded.

Takeaways

1. 1

   The initial ticket batch is fetched with getServerSideProps, ordered by createdAt descending, and limited to 20 records.

2. 2

   Subsequent pages use Supabase’s range method with from and to indexes derived from the offset and PAGE_COUNT values.

3. 3

   Framer Motion transitions each ticket from opacity 0 and y 20, while delays based on item indexes stagger the animations.