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

DevFeed: [Infinite scroll with Next.js, Framer Motion, and Supabase](<https://devfeed.tech/articles/infinite-scroll-with-next-js-framer-motion-and-supabase-403.md>)

Original publisher: [Read original article](<https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion>)

Author: Francesco Sansalvadore

Published: 2023-04-04T07:00:00Z

Content type: tutorial

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [infinite scroll](<https://devfeed.tech/topics/infinite-scroll.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [Supabase](<https://devfeed.tech/topics/supabase.md>), [Framer Motion](<https://devfeed.tech/topics/framer-motion.md>), [web design](<https://devfeed.tech/topics/web-design.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [Caching](<https://devfeed.tech/topics/caching.md>)

Tags: [cache](<https://devfeed.tech/tags/cache.md>), [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [data](<https://devfeed.tech/tags/data.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [infinite-scroll](<https://devfeed.tech/tags/infinite-scroll.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [performance](<https://devfeed.tech/tags/performance.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web-design](<https://devfeed.tech/tags/web-design.md>)

## AI overview

A tutorial on implementing infinite scrolling with Next.js, Supabase, and Framer Motion. It explains lazy loading ticket data in batches as the user scrolls, with techniques such as server-side rendering, code splitting, caching, prefetching, and debouncing to improve performance and user experience.

## Source excerpt

Lazy load and paginate data on scroll with Next.js and a sprinkle of Framer Motion magic ✨