pagination - On page refresh it goes back to page 1

Question

I am building a blog with next.js and contentful. I am using pagination for blog posts. During development, if I am on page "/blog/?page=3" on page refresh it still shows the current page, but in production, if I refresh page it redirects to first page "/blog/?page=1"

Here is the code.

  const Homepage = (props) => {
  const router = useRouter();
  const [page, updatePage] = useState(props.page);

  const calculateRange = (length) => Array.from({ length }, (v, k) => k + 1);
  const rangeLimit = Math.ceil(props.total / props.limit);
  const range = calculateRange(rangeLimit);

  useEffect(() => {
    router.push({ pathname: "/blog", query: { page } });
  }, [page]);

  return (
    <Layout SEO={seoConfig}>
      <ContentfulPosts posts={props.entries} />
      <div className="pagination">
        <Paginator
          handlePaginationChange={(event) => updatePage(event)}
          range={range}
          skip={page}
        />
      </div>
    </Layout>
  );
};

Homepage.getInitialProps = async ({ query: { page = 1 } }) => {
  if (page) {
    page = parseInt(page);
  }

  const pglimit = 3;
  const { entries, total, skip, limit } = await fetchEntries({
    limit: pglimit,
    skip: (page - 1) * pglimit,
  });

  return {
    page,
    entries,
    total,
    skip,
    limit,
  };
};

export default Homepage;

I dont know why it is working fine in development but not in production. How to solve it?

question from:https://stackoverflow.com/questions/65908442/on-page-refresh-it-goes-back-to-page-1

Answer 1

Waitting for answers