--- title: Infinite scroll with Next.js, Framer Motion, and Supabase description: Learn how to create an infinite scroll using NextJs, Supabase, and Framer Motion. Improve user experience by dynamically loading content as the user scrolls.... canonical: https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Infinite scroll with Next.js, Framer Motion, and Supabase | daily.dev og:description: Learn how to create an infinite scroll using NextJs, Supabase, and Framer Motion. Improve user experience by dynamically loading content as the user scrolls.... og:url: https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r og:image: https://api.daily.dev/og/posts/TO9Cep64r.png og:image:alt: Infinite scroll with Next.js, Framer Motion, and Supabase og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Infinite scroll with Next.js, Framer Motion, and Supabase **[Supabase](https://daily.dev/sources/supabase)** · 7 min read · 48 upvotes · 2 comments ## Summary Learn how to create an infinite scroll using NextJs, Supabase, and Framer Motion. Improve user experience by dynamically loading content as the user scrolls. Add animation to the loaded tickets using the Framer Motion library. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@alex\_kubica** · 0 upvotes > A cool guide! > I'd recommend moving functions that use supabase to server side so it won't be exposed on the frontend **@sunnynk19** · 0 upvotes > Check this out @akhil1704 --- Tags: [#framer-motion](https://daily.dev/tags/framer-motion), [#nextjs](https://daily.dev/tags/nextjs), [#supabase](https://daily.dev/tags/supabase) [View this post on daily.dev](https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Infinite scroll with Next.js, Framer Motion, and Supabase","url":"https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r"},"datePublished":"2023-04-04T11:24:08.427Z","dateModified":"2025-09-06T02:41:59.990Z","description":"Learn how to create an infinite scroll using NextJs, Supabase, and Framer Motion. Improve user experience by dynamically loading content as the user scrolls....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a95e8a534e6ca29b2dfc72666769a87a?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a95e8a534e6ca29b2dfc72666769a87a?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Supabase","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Supabase","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d0aa77cfb88d44dd8e6d5cd02fdf80bd","url":"https://daily.dev/sources/supabase"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":48},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"framer-motion,nextjs,supabase","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Supabase","item":"https://daily.dev/sources/supabase"},{"@type":"ListItem","position":3,"name":"Infinite scroll with Next.js, Framer Motion, and Supabase"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/infinite-scroll-with-next-js-framer-motion-and-supabase-to9cep64r","comment":[{"@type":"Comment","text":"A cool guide!\nI’d recommend moving functions that use supabase to server side so it won’t be exposed on the frontend","datePublished":"2023-04-04T13:18:38.771Z","url":"https://daily.dev/posts/TO9Cep64r#c-sa7teBtjc","author":{"@type":"Person","name":"Alex Kubica","url":"https://daily.dev/alex_kubica","image":"https://media.daily.dev/image/upload/s--yaFrihTb--/f_auto/v1777886969/avatars/avatar_HEiWxe6EcNZvchrZGrARf?_a=BAMAMiWQ0"}},{"@type":"Comment","text":"Check this out @akhil1704","datePublished":"2023-04-04T12:58:29.577Z","url":"https://daily.dev/posts/TO9Cep64r#c-Wnc4skOud","author":{"@type":"Person","name":"Sunny Sharma","url":"https://daily.dev/sunnynk19","image":"https://media.daily.dev/image/upload/v1680605877/avatars/avatar_wMfSgj7e42IVq2WzUm0Mf.jpg"}}]} ```