title: Pagination in NextJs
body: <p>I am trying to paginate one of my pages in the application which is built with React / NextJs - <code>getServerSideProps</code>.</p>
  <p>Step 1: Creates a pagination component <br/>
  Step 2: Redirect to a URL with Page numbers (based on user clicks)<br/>
  Step 3: It should re-render <code>getServerSideProps</code> with the newer page value, which is not happening right now.</p>
  <p>My current code block (Server Side Props - API call):</p>
  <pre><code>export const getServerSideProps = async (ctx) =&gt; {
    try {
      const APIKey = await getCookieAPIKey(ctx);
      const user = await getCookieUser(ctx);
      const dataSSR = await getDataSSR(
        APIKey,
        '/xyz/xyz/read/',
        user.user_id,
        'user_id',
        ctx.query.page,
        ctx.query.limit
      );
     
      // console.log(d, &quot;data&quot;)
      return {
        props: {
          dataSSR
        }
      };
    } catch (err) {
      ...
      return { props: { fetchError: err.toString() } };
    }
  };
  
  
  export const getDataSSR = async (APIKey, path, id, idString, page, limit) =&gt; {
    //generate URL path for fetch
    const base_url = `${ENDPOINT}/services`;
    let url;
    if (id &amp;&amp; !idString &amp;&amp; !page) {
      url = base_url + path + '?key=' + APIKey + '&amp;id=' + id;
    } else if (id &amp;&amp; idString &amp;&amp; page) {
      url = base_url + path + '?key=' + APIKey + `&amp;${idString}=` + id + '&amp;page=' + page + `&amp;limit=${!limit ? '24' : limit}`;
    } else if (id &amp;&amp; idString &amp;&amp; !page) {
      url = base_url + path + '?key=' + APIKey + `&amp;${idString}=` + id + '&amp;page=0' + `&amp;limit=${!limit ? '24' : limit}`;
    }
    else {
      url = base_url + path + '?key=' + APIKey + '&amp;page=' + page + `&amp;limit=${!limit ? '10' : limit}`;
    }
  </code></pre>
  <p>I followed <a href="https://javascript.plainenglish.io/simple-pagination-in-next-js-using-react-paginate-562830c00279" rel="nofollow noreferrer">this tutorial</a> for pagination.</p>
  <p>With a modification of the click method statement:</p>
  <pre><code>&lt;ReactNextPaging
      itemsperpage={itemsperpage}
      nocolumns={nocolumns}
      items={items}
      pagesspan={pagesspan}
    &gt;
      {({
        getBackButtonProps,
        getFwdButtonProps,
        getFastFwdButtonProps,
        getSelPageButtonProps,
        nopages,
        inipagearray,
        pagesforarray,
        currentpage,
        noitems,
        initialitem,
        lastitem,
        goBackBdisabled,
        goFastBackBdisabled,
        goFwdBdisabled,
        goFastFwdBdisabled
      }) =&gt; (
        &lt;tbody style={{ alignItems: &quot;center&quot;, margin: &quot;auto auto&quot; }}&gt;
          {/* {items.slice(initialitem, lastitem).map((item, index) =&gt; {
                              return item;
                          })} */}
          {noitems &gt; 0
            ? [
              &lt;tr key={&quot;pagingrow&quot; + 100} &gt;
                &lt;td colSpan={nocolumns} style={{ textAlign: &quot;center&quot; }}&gt;
                  &lt;button
                    style={buttonStyles(goBackBdisabled)}
                    {...getBackButtonProps()}
                    disabled={goBackBdisabled}
                  &gt;
                    {&quot;&lt;&quot;}
                  &lt;/button&gt;
                  {Array.from(
                    { length: pagesforarray },
                    (v, i) =&gt; i + inipagearray
                  ).map(page =&gt; {
                    return (
                      &lt;button
                        key={page}
                        {...getSelPageButtonProps({ page: page })}
                        disabled={currentpage == page}
                        style={{ margin: &quot;0.5em&quot;, backgroundColor: &quot;transparent&quot;, border: &quot;none&quot; }}
                        onClick={e =&gt; page != currentpage ? pageNumClick(page, e, currentpage) : {}}
                      &gt;
                        {page}
                      &lt;/button&gt;
                    );
                  })}
                  &lt;button
                    style={buttonStyles(goFwdBdisabled)}
                    {...getFwdButtonProps()}
                    disabled={goFwdBdisabled}
                  &gt;
                    {&quot;&gt;&quot;}
                  &lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            ]
            : null}
        &lt;/tbody&gt;
      )}
  &lt;/ReactNextPaging&gt;
  </code></pre>
  <p>Page redirection handle code :</p>
  <pre><code>const pageNumClick = (page, e, currentpage) =&gt; {
      let el = document.getElementsByClassName(`.clickable-page-${page}`)
      console.log(el)
      e.target.style.backgroundColor = &quot;#353E5A&quot;;
      currentpage = page;
      console.log(page, &quot;clicked page number&quot;, e.target, currentpage)
      //Redirects to the URL with clicked page number
      router.push({
        pathname: router.pathname,
        query: { show: showname, page: page }
      })
      refreshData(); // Try to refresh props once the URL is changed
    }
  
    const refreshData = () =&gt; {
      router.replace(router.asPath);
      console.log('refreshed')
    }
  </code></pre>
  <p>Attempts to resolve:</p>
  <ol>
  <li>Added <code>refreshData</code> method to invoke <code>ServerSideProps</code> upon URL change based on <a href="https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/" rel="nofollow noreferrer">this</a>.</li>
  <li>Tried changing <code>getServerSideProps</code> to <code>getInitialProps</code> - with no luck</li>
  </ol>
  <p>Any help or links would be appreciated, been stuck with the task since 3 days</p>