Next.js + Strapi - Infinite Scroll

In the previous episode we generated pretty big list of posts. Now it's time to display those posts in our #Nextjs and #Strapi app. Of course it's not a very good idea to display all of those posts all at once, you should use pagination, load more or even better Infinite Scroll for that - and that is exactly what we are going to be doing in this episode.

To implement Infinite Scroll we will be using React plugin called `react-infinite-scroll-component`, this plugin is going to make developing this feature a breeze.

### Code used in this tutorial

----------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------

### You can support my work on Patreon

### Follow me on Social Media

[Queones]

Great explanation, it helped me a lot!!!

[gabrielaraujrrr]

Thank you very much, it helped me a lot.

In my case I used axios, for those who do not have not implemented COUNT in the API:

const [users, setUsers] = useState([ ]);
const [hasMore, setHasMore] = useState(true);
const [page, setPage] = useState(1);

useEffect (() => { loadUsers () }, [page]);

const loadUsers = async () => {
await api
.get
.then ((newUsers) => {
setUsers ([... users, ... newUsers.data])
if (newUsers.data.length <15) setHasMore (false)
})
};

[srajanbarkade]

start not working , i can load the no. of posts i have set litmit to but cannot get next set of images
edit : nvm updated the strapi parameters to new one now its working fine

[tecmaster]

Nice... Thank you so much... The voice sound incredible, what mic do you use?

[meevluv]

Thank you, this was a very helpful video

[om]

I tried to use infinite scrolling along with some filters but was unable to do.
The parts where I got stucked -
1. When I had to apply any filter I was unable to figure out where should I place the filters object within getMorePosts function.
2. It became even more complex when I added search filter.

[kbtz.sounds]

love the video and the dnb, thanks <3

[belalmohsen]

its loading once and stuck on loading and don`t run next function again

[alanmartin]

Hey there, will this hide your api key from the client?

[kishorrathva]

i am using fullpage js to show blog list , i have tried react infinite component to fetch data dynamically but its not working !! ...any suggestion on this ?