[solved] How to implement infinite scroll in next js? simple example cord

Infinite Scrolling in Next.js: A Comprehensive Implementation Guide for European Developers

package.json

{
    "name": "next-js-infinite-scroll",
    "version": "1.0.0",
    "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start",
      "post-update": "yarn upgrade --latest"
    },
    "dependencies": {
      "next": "latest",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-infinite-scroll-component": "6.1.0"
    },
    "license": "MIT",
    "keywords": [],
    "description": "Infinite scrolling in next js"
  }

pages\index.js

import Content from "./Content";

export default function index(props) {
  return (
    <>
      <div>
        <Content data={props.data} />
      </div>
    </>
  );
}

export const getStaticProps = async () => {
  const data = await fetch(
    "https://jsonplaceholder.typicode.com/todos?_limit=10"
  ).then((response) => response.json());
  return {
    props: { data }
  };
};

pages\Content.js

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const Content = ({ data }) => {
  const [posts, setPosts] = useState(data);
  const [hasMore, setHasMore] = useState(true);

  const getMorePost = async () => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/todos?_start=${posts.length}&_limit=10`
    );
    const newPosts = await res.json();
    setPosts((post) => [...post, ...newPosts]);
  };

  return (
    <>
      <InfiniteScroll
        dataLength={posts.length}
        next={getMorePost}
        hasMore={hasMore}
        loader={<h3> Loading...</h3>}
        endMessage={<h4>Nothing more to show</h4>}
      >
        {posts.map((data) => (
          <div key={data.id}>
            <div className="back">
              <strong> {data.id}</strong> {data.title}
            </div>
            {data.completed}
          </div>
        ))}
      </InfiniteScroll>
      <style jsx>
        {`
          .back {
            padding: 10px;
            background-color: #ff6a00;
            color: white;
            margin: 10px;
          }
        `}
      </style>
    </>
  );
};

export default Content;

command run and node_modules create

 yarn install

yarn dev

OUTPUT

Infinite scrolling is a popular feature that allows users to scroll through a seemingly endless list of content without the need to click through to different pages. In this guide, we will show you how to implement infinite scroll in Next.js, a popular framework for web development and front-end programming.

Before we begin, it's important to note that infinite scrolling can have a significant impact on the performance of your website, so it's important to use it judiciously and test the implementation thoroughly.

Step 1: Install the next-infinite-scroll package

The first step is to install the next-infinite-scroll package, which is a simple and easy-to-use package that allows you to add infinite scrolling to your Next.js application. To install the package, simply run the following command in your terminal:

npm install next-infinite-scroll

Step 2: Import the package and add the component to your code

Once the package is installed, you'll need to import it into your component and add it to your code. The component accepts several props such as hasMore, loadMore, and loader. The hasMore prop is a boolean that tells the component whether there is more content to load, the loadMore prop is a function that should be called when the component reaches the end of the page, and the loader prop is a component that should be displayed while the content is being loaded.

Step 3: Add the loadMore function

The loadMore function is responsible for loading more content when the user scrolls to the bottom of the page. This function should be added to the component that contains the infinite scroll component. The function can be as simple as fetching more data from an API or loading more items from a database.

Step 4: Test the implementation

Once the component is added to your code and the loadMore function is implemented, you should test the infinite scroll feature to make sure it is working as expected. You can do this by adding more content to your application and scrolling to the bottom of the page.

In conclusion, infinite scrolling can be a great way to enhance the user experience on your website, but it's important to use it judiciously and test the implementation thoroughly to ensure it doesn't negatively impact the performance of your website. With the next-infinite-scroll package, implementing infinite scrolling in Next.js is simple and easy for European developers.