Pagination on articles using nextjs

Developing with Prismic
1

Hi Prismic,
I am experiencing difficulty in displaying article pagination on the homepage.
I want display only three articles and incorporate a pagination feature at the bottom of the page that allows the user to navigate to the next set of three articles by clicking on the corresponding page number.

I created my app using blog starter nextjs-starter-prismic-blog
I have pages/index.js page with following page which allows display only three aritcles

export async function getStaticProps({ previewData }) {
  const client = createClient({ previewData });
  const articles = await client.getByType("article", {
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
    pageSize: 3,
  });
  const navigation = await client.getSingle("navigation");
  const settings = await client.getSingle("settings");
  console.log(articles);
  return {
    props: {
      articles,
      navigation,
      settings,
      // params,
    },
  };
}

Also I have pages/articles/[uid].js file

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });
  // console.log(params);
  const article = await client.getByUID("article", params.uid);
  const page = params;
  const latestArticles = await client.getAllByType("article", {
    limit: 3,
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  });
  const navigation = await client.getSingle("navigation");
  const settings = await client.getSingle("settings");

  return {
    props: {
      article,
      latestArticles,
      navigation,
      settings,
      page,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const articles = await client.getAllByType("article");
  const path = articles.map((article) => prismicH.asLink(article));
  console.log(path);
  return {
    paths: articles.map((article) => prismicH.asLink(article)),
    fallback: false,
  };
}

How can I use page parameter to my URL? so I can do something like myblog.com/articles/page-2 and pass this information to my pagination ?

Thanks

3

Hello @ryan81.park

For applying pagination, you can utilize prismic.io client and perform a query along with params object.

For instance:

For performing pagination in queries:

Getting the third page with five results with the order of publication date will be something like this:

const articles = await client.getByType("article", {
  orderings: {
    field: 'document.first_publication_date',
    direction: 'desc'
  },
  pageSize: 5,
  page: 3
});

You can also have variables like after in the params object.
Reference:

For retrieving the parameters from front end:
You can use the query parameters in the request or URL and pass it to the params object of Prismic.

Let me know if you have any further questions.

Thanks,
Priyanka

4

Thank you Priyanka.
This is Great. I am getting closer I think.
How should I use query parameters in the request or URL and pass it to the params object of Prismic. ? Could you please provide example?

Here is my efforts so far

Url is localhost:3000/works?page=8

pages/[uid].js

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });
  console.log(params.page);
  const page = await client.getByUID("page", params.uid);
  // const test = params;
  // const url = client.resolvePreviewURL(params);
  const articles = await client.getByType("article", {
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
    pageSize: 3,
    page: params.page || 2,
  });
  const navigation = await client.getSingle("navigation");
  const settings = await client.getSingle("settings");

  return {
    props: {
      page,
      navigation,
      settings,
      articles,
      params,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const pages = await client.getAllByType("page");

  return {
    // paths: [{ params: { uid: "work2" } }, { params: { page: 8 } }],
    paths: pages.map((page) => prismicH.asLink(page)),
    fallback: false,
  };
}

My problem is param is only return with uid NOT page (page=8 rom url)
Any idea ? Thanks

5

Hi @ryan81.park

Did you try with getServerSideProps like:

export async function getServerSideProps(context) {
  const { id } = context.query;
await .........

You can also use a router like:

import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const router = useRouter();
  const { page } = router.query;
........
........

Let me know if it works.

Thanks,
Priyanka

6

Hi Priyanka,
Thanks for your reply.

For first option, I am having following error with getServerSideProps

TypeError: Cannot read property 'query' of undefined

export async function getServerSideProps({ params, previewData, context }) {
      const { id } = context.query;
      ....

For second option, I am having following error in getStaticPaths ?

TypeError: Cannot read property 'useContext' of null

export async function getStaticPaths() {
  const client = createClient();
  const router = useRouter();
  const { page } = router.query;
  ....

Also I don't think hooks can be placed inside getStaticPaths ?

React Hook "useRouter" is called in function "getStaticPaths" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

Please let me know what you think.
Thanks

7

Hi @ryan81.park ,

Ohh my bad, I apologize.

getServerSideProps() only receives one parameter (context ), which contains both previewData and query ([along with some other data]. Here’s how the function should be written:

export async function getServerSideProps({ previewData, query }) {

  let { page } = query;

  // ...the rest of the function...
}

Give this a try and let me know.

Thanks,
Priyanka

8

Yes, Got it !
Thanks for your support and your patience
You made my day ! :slight_smile: