How can I fetch data in prismic app built with nextjs?

Question

I've built my app using primsic with nextjs.

On landing page, I want to display only 3 aritcles of my page and then If user click next page button, I want to display next 3 aritcles page

I have index page which includes following props. How can I fetch data for my next 3 aritcles using following response data. next_page is the API url for next aritcles.

Is there way to fetch data using prismic api or nextjs api to fetch data ?

articles:
{
    "page": 1,
    "results_per_page": 3,
    "results_size": 3,
    "total_results_size": 14,
    "total_pages": 5,
    "next_page": "https://myapp.cdn.prismic.io/api/v2/documents/search?ref=Y-N6RxAAACEAh2Gz&q=%5B%5Bat%28document.type%2C+%22article%22%29%5D%5D&orderings=%5Bmy.article.publishDate+desc%2Cdocument.first_publication_date+desc%5D&page=2&pageSize=3",
    "prev_page": null,
    "results": [
        {title: "result 1"},
        {title: "result 2"},
        {title: "result 3"},
    ],
    "license": "All Rights Reserved"
}

const Index = ({ articles, navigation, settings, pathname }) => {
  
  return (
    <Layout>
      <Bounded size="widest">
        <ul className="grid grid-cols-1 gap-16">
          {articles?.results.map((article) => (
            <Article key={article.id} article={article} />
          ))}
        </ul>
        <NextLink href={articles.next_page}>test</NextLink>
      </Bounded>
    </Layout>
  );
};

export default Index;

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,
    },
  };
}

Have you found a solution yet? I'm in the same boat as you. – techmeowt Mar 28 '23 at 19:00 — techmeowt, Mar 28 '23 at 19:00

score 2 · Accepted Answer · answered Mar 28 '23 at 20:08

Prismic page Rest API query parameter allows you to specify the offset of results.

The most straightforward way to accomplish this with Next.js is to include a page parameter to your URL. This can be done using a dynamic route (e.g. https://example.com/blog/page-2 via pages/blog/[page].js) or a URL parameter (e.g. https://example.com/blog?page=2).

You can pass the page parameter to the query like this (note the use of params.page):

export async function getStaticProps({ params, 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,
    page: params.page,
  });

  return {
    props: {
      articles,
    },
  };
}

The response's next_page and prev_page values can be used to determine if a next or previous page is available. If it has a value (a URL), then you can safely link to the next/previous page. If the value is null, you should not link to the next/previous page.

Note that you would not use the next_page/prev_page URL in the API response as your link; that is a link to the Rest API.

How can I fetch data in prismic app built with nextjs?

1 Answers1