Navigating through pages in Next.js

Question

Navigating through pages in Next.js

I have been working on implementing pagination for a page in my React / NextJs application using getServerSideProps.

Here is the approach I followed:

Create a pagination component
Redirect to a URL with updated page numbers based on user clicks
Ensure that the getServerSideProps re-renders with the new page value, which currently isn't happening.

In the current code block (Server Side Props - API call):

...

I referred to this tutorial for guidance on pagination. Additionally, I modified the click method statement as follows:

...

For handling page redirection, I have implemented the following code:

...

In an attempt to solve the issue, I have tried:

Adding a refreshData method to refresh props upon URL change, inspired by this article.
Switching from getServerSideProps to getInitialProps, but it didn't yield the desired results.

I would greatly appreciate any help or useful resources to overcome this challenge that has been persisting for the past 3 days.

pagination next.js react-pagination

Answer 1

Answer №1

The issue arises due to the refreshdata function, where router.asPath will contain the current URL. The following code snippet is functioning correctly for me.

function ProductDetail({ products, page, limit }) {
  const router = useRouter();
  const pageNumClick = (page, limit) => {
    router.push({
      pathname: router.pathname,
      query: { limit: limit, page: page },
    });
  };
  return (
    <div>
      <div onClick={() => pageNumClick(parseInt(page) + 1, limit)}>Next page</div>
      <div onClick={() => pageNumClick(parseInt(page) - 1, limit)}>
        Previous page
      </div>
      {products ? JSON.stringify(products) : <></>}
    </div>
  );
}

export async function getServerSideProps({ params, query, ...props }) {
  const products = await getProducts(query.limit, query.page);
  return {
    props: {
      products: products ? products : {},
      page: query.page,
      limit: query.limit,
    },
  };
}

Answer 2

The issue arises due to the refreshdata function, where router.asPath will contain the current URL. The following code snippet is functioning correctly for me.

function ProductDetail({ products, page, limit }) {
  const router = useRouter();
  const pageNumClick = (page, limit) => {
    router.push({
      pathname: router.pathname,
      query: { limit: limit, page: page },
    });
  };
  return (
    <div>
      <div onClick={() => pageNumClick(parseInt(page) + 1, limit)}>Next page</div>
      <div onClick={() => pageNumClick(parseInt(page) - 1, limit)}>
        Previous page
      </div>
      {products ? JSON.stringify(products) : <></>}
    </div>
  );
}

export async function getServerSideProps({ params, query, ...props }) {
  const products = await getProducts(query.limit, query.page);
  return {
    props: {
      products: products ? products : {},
      page: query.page,
      limit: query.limit,
    },
  };
}

Navigating through pages in Next.js

Answer №1

Similar questions

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

transmit data retrieved from `getStaticProps` to other static pages in NextJS

Instructions on transforming an img into an Image component within next.js

Mongoose and Next.js: Encountered Runtime Error - Cannot Access Undefined Properties (Token)

Troubleshooting: Next JS 13/14 - Server component failing to update data upon revisiting without requiring a refresh

I'm seeing a message in the console that says "Form submission canceled because the form is not connected." Any idea why this is happening?

Switch the visibility of a div tag using Next.js

Unlocking the contents of an array from a separate file in Next.js

Utilizing server-side cookies in next.js and nest.js for efficient data storage

What is the most effective method to query Prisma using a slug without utilizing a React hook?

What methods can be used to prevent accessing 'res' after the resolution of getServerSideProps?

Limiting the size of image uploads in AWS S3

Using a JavaScript command, connect a function from one file to another file

nextAuth.js is failing to access the accessToken, returning only the values {iat, exp, jti} instead

Is there a way to implement absolute imports in both Storybook and Next.js?

Utilizing client-side properties in an onClick event within Next.js framework

Unusual host value being returned by next/headers in Next.js version 13

I'm receiving a 404 error on my API route in next.js - what could be causing this

Is there a way to personalize the appearance of Static File in nextjs?

Guide to finding and saving email addresses from a string output: extracting and storing each one individually in a text file