Step by step guide to setup infinite loading in NextJs

NextJs is a powerful React framework that makes it easy to build server-rendered React applications. Setting up infinite loading in a Next.js application involves implementing a mechanism to load more data as the user scrolls to the bottom of the page. This is commonly used in social media feeds, blogs, and e-commerce websites.

Step 1: Create a new Next.js project

To get started, create a new Next.js project by running the following command:

npx create-next-app@latest infinite-loading-app
cd my-infinite-scroll-app

Step 2: Create a Data Fetching Function

Next, create a function that fetches data from an API. For this example, we will use the JSONPlaceholder API to fetch dummy data. Create a new file called fetchData.js in the lib directory and add the following code:

// lib/fetchData.js
export async function fetchData(page) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`
  )
  const data = await response.json()
  return data
}

Step 3: Create a page to fetch first set of data

Next, create a new page.jsx and add the following code:

// app/page.tsx
import { fetchData } from '../lib/fetchData'

const Page = async() => {
  const posts = await fetchData(1)
  return (
    <div>
      <PostList data={posts}>
    </div>
  )
}

export default Page

Step 4: Create a PostList component

Next, create a new component called PostList.jsx in the components directory and add the following code:

// components/PostList.jsx
const PostList = ({ data }) => {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}

export default PostList

Step 5: Implement Infinite Scrolling

To implement infinite scrolling,

First make PostList a client component by adding 'use client' to the top of the file.

// components/PostList.jsx
'use client'
const PostList = ({ data }) => {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}

export default PostList

Now add react-intersection-observer to observe the sentinel element at the bottom of the page.

npm install react-intersection-observer

import useState, useEffect form react and useInView from react-intersection-observer in PostList.jsx

.

// components/PostList.jsx
'use client'
import { useState, useEffect } from 'react'
import { useInView } from 'react-intersection-observer'

const PostList = ({ data }) => {
  const [posts, setPosts] = useState(data)
  const [page, setPage] = useState(1)
  const { ref, inView } = useInView()

  useEffect(() => {
    if (inView) {
      const nextPage = page + 1
      fetchData(nextPage).then(newPosts => {
        setPosts([...posts, ...newPosts])
        setPage(nextPage)
      })
    }
  }, [inView])

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
      <div ref={ref}></div>
    </div>
  )
}

export default PostList

Step 6: Run the Application

Finally, run the Next.js application by running the following command:

npm run dev

Navigate to http://localhost:3000 in your browser to see the infinite loading

Conclusion

In this post, we learned how to implement infinite loading in a Next.js application using the Intersection Observer API. This technique allows us to load more data as the user scrolls to the bottom of the page, providing a seamless user experience.