Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

We have completed all the basic features for our YouTube Summarize AI app, which we have been working on. These include full CRUD functionality, authentication, search, pagination, and AI video summarization. If you still need to complete your project, check out our previous posts in this Epic Next.js 14 tutorial series.

- [Part 1: Learn Next.js by building a website](https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-1-2)
- [Part 2: Building Out The Hero Section of the homepage](https://strapi.io/blog/epic-next-js-14-tutorial-part-2-building-out-the-home-page)
- [Part 3: Finish up up the homepage Features Section, TopNavigation and Footer](https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-3)
- [Part 4: How to handle login and Authentication in Next.js](https://strapi.io/blog/epic-next-js-14-tutorial-part-4-how-to-handle-login-and-authentication-in-next-js)
- [Part 5: File upload using server actions](https://strapi.io/blog/epic-next-js-14-tutorial-part-5-file-upload-using-server-actions)
- [Part 6: Get Video Transcript with OpenAI Function](https://strapi.io/blog/epic-next-js-14-tutorial-part-6-create-video-summary-with-next-js-and-open-ai)
- [Part 7: Strapi CRUD permissions](https://strapi.io/blog/epic-next-js-14-tutorial-part-7-next-js-and-strapi-crud-permissions)
- [Part 8: Search & pagination in Next.js](https://strapi.io/blog/epic-next-js-14-tutorial-part-8-search-and-pagination-in-next-js)
- **Part 9: Backend deployment to [Strapi Cloud](https://cloud.strapi.io/login)**
- Part 10: Frontend deployment to Vercel


This post will cover how to deploy your project to **Strapi Cloud**. 

## Why Strapi Cloud

It is the easiest and hassle-free way to deploy your Strapi CMS projects.

**Get Everything You Need to Run Strapi in Production**

Here are some items you get out of the box using Strapi Headless CMS Cloud that you don't have to set up yourself. 

1. **CDN** (Content Delivery Network)—This helps deliver content to users more efficiently by caching content on servers located closer to the user.
2. **Database** - **Strapi Cloud** includes a database for storing and managing the application data.
3. **Email** - **Strapi Cloud** provides email functionality, allowing users to send emails from their applications.
4. **File Storage** - **Strapi Cloud** includes file storage capabilities, allowing users to store and manage files associated with their applications.

You also can access real-time logs, share and collaborate on your project with others, and use many other features. you can learn more about **Strapi Cloud** [here](https://strapi.io/cloud)

Currently, **Strapi Cloud** is a paid feature, but you can try it out for FREE for 14 days (no credit card required). The goal is to eventually have a free-tier. However, since we are an open-source company, Strapi Headless CMS is free for anyone to use. When we started **Strapi Cloud** last year, we targeted small organizations with our $99 offering; we now offer a developer plan at $29 per month, which includes all the features mentioned above.

There are many ways to host your Strapi CMS project, and we encourage you to use the best option available. In the future, I will create another blog post covering Strapi backend deployment to [Render](https://render.com/). The caveat is that when using your own hosting solution, you will be responsible for setting up your own database, file storage, and anything else that is required.

But today, we will take the hassle-free approach and use Strapi Cloud, which offers a FREE 14-day trial.

## Preparing Our Project For Deployment

To deploy your project, you just need a GitHub repo with your project. Since you followed this tutorial, you should be ready to go. 

Here is the repo of my project.

![03-git-hub-repo.png](https://api-prod.strapi.io/uploads/03_git_hub_repo_94d6a39f56.png)

Let's get started.

## Creating Your Strapi Account 

We will start by creating a **Strapi Cloud** Account. You will use your GitHub account to sign in. To do so, navigate to the [Strapi Cloud Login](https://cloud.strapi.io/login).

You are going to choose GitHub as your login method.

![04-strapi-cloud.png](https://api-prod.strapi.io/uploads/04_strapi_cloud_a325da3186.png)

Once you click on the link, you will see the following screen. Click the `Authorize Strapi Cloud` button.

Now that you have your account, create your first project!

## Create Your First Strapi Project

![05-auth-cloud.png](https://api-prod.strapi.io/uploads/05_auth_cloud_bb5081574b.png)

You should be greeted with the following page. Let's click the `Create Project` button.

![06-create-project.png](https://api-prod.strapi.io/uploads/06_create_project_dbeec64a3e.png)

You will be greeted with the following screen to give **Strapi Cloud** a try. Notice that you do not have to provide your credit card.

![07-free-trial.png](https://api-prod.strapi.io/uploads/07_free_trial_f4440ef5cf.png)

Click the `Create my project` button to continue.

Now, import your project via GitHub. Click on the button and follow the steps.

![08-github-import.png](https://api-prod.strapi.io/uploads/08_github_import_ae43f1fc76.png)

Once you authorize GitHub, you should see the following page. If not, you may need to refresh your browser.

![09-github-repo.png](https://api-prod.strapi.io/uploads/09_github_repo_596fa41949.png)

Notice I chose my GitHub account `ilovestrapi` and pointed to my repository `epic-next-course.`

Let's continue by completing the steps in the **Setup** section. 

![10-setup.png](https://api-prod.strapi.io/uploads/10_setup_6c8b025724.png)

I will give my project a **Display Name**, point to my **main** branch, and select **New York** as my region.

Afterward, we will click on the `Show advanced settings` button. Since our `frontend` and `backend` are in the same repo, we need to point to our Strapi CMS project in the `/backend` folder.

![11-create-project.png](https://api-prod.strapi.io/uploads/11_create_project_edafa7112c.png)

I will keep the default node version, and since we don't have any environment variables, I will click on the `Create project` button.

You should see the following screen.

![12-starting.png](https://api-prod.strapi.io/uploads/12_starting_2006ca5fd5.png)

As the process continues, you will be redirected to the following page, where you should see the real-time logs for your deployment process.

![13-deploying.png](https://api-prod.strapi.io/uploads/13_deploying_8b0f218a1e.png)

Once your project finishes deploying, you should see the following screen. You can continue your project by clicking the `Visit app` button.  

![14-complete.png](https://api-prod.strapi.io/uploads/14_complete_66d927949b.png)

If you get the `This site can't provide a secure connection` message, you have to give it a moment to allow all the changes to propagate. 

![15-message.png](https://api-prod.strapi.io/uploads/15_message_972e6702fe.png)

Once the process is finished, you will be greeted with the **Create Admin** user screen.  

![16-login.png](https://api-prod.strapi.io/uploads/16_login_5fe4716845.png)

Go ahead and create your first user. Once you have done so, you will be greeted with the Strapi dashboard screen.

![17-dashboard.png](https://api-prod.strapi.io/uploads/17_dashboard_abc303e1ef.png)

Congratulations, you have deployed your very first Strapi project. 

## How To Transfer Our Local Data To Our Cloud Instance

As a bonus, let's examine how we can transfer local Strapi data to seed our new cloud instance.

Let's start by logging into Strapi cloud, going to our deployed application, and logging in.

![18-dashboard.png](https://api-prod.strapi.io/uploads/18_dashboard_3b410ab852.png)

In your Strapi admin panel, click on the `Visit App` button. This will take you to your deployed app.

![19-login.png](https://api-prod.strapi.io/uploads/19_login_962676f742.png)

Enter your credentials to log in.

![20-settings.png](https://api-prod.strapi.io/uploads/20_settings_83fc04d510.png)

Navigate to `Settings` => `Transfer Tokens` and click the `Add new Transfer Token` button.

![21-token.png](https://api-prod.strapi.io/uploads/21_token_26be17e0b7.png)

Fill it the following options.

**Name**: Transfer
**Description**: Initial seed
**Token duration**: 7 days
**Token type** Push

And finally, click the `Save` button.

You should now see your generated token.

![22-generated-token.png](https://api-prod.strapi.io/uploads/22_generated_token_ffe2ec5617.png)

We will keep this open because we need our project's url and token for the next step.

To transfer our data, we will use the Strapi CLI Transfer command. 

Ensure you are in your `backend` folder and run the following command to see all the helpful options.

``` bash
yarn strapi help transfer
```

You should see the following output.

``` bash
➜  backend git:(main) yarn strapi help transfer
yarn run v1.22.21
$ strapi help transfer
Usage: strapi transfer [options]

Transfer data from one source to another.

Options:
  --from <sourceURL>                      URL of the remote Strapi instance to get data from
  --from-token <token>                    Transfer token for the remote Strapi source
  --to <destinationURL>                   URL of the remote Strapi instance to send data to
  --to-token <token>                      Transfer token for the remote Strapi destination
  --force                                 Automatically answer "yes" to all prompts, including
                                          potentially destructive requests, and run non-interactively.
  --exclude <comma-separated data types>  Exclude data using comma-separated types. Available types:
                                          content,files,config
  --only <command-separated data types>   Include only these types of data (plus schemas). Available
                                          types: content,files,config
  -h, --help                              Display help for command
✨  Done in 1.30s.

In the next blog post, we will deploy our front end to **Vercel** and connect both projects.

We are on our final stretch. See you in the next post.

```

We will use the `transfer --to` command to point to our Strapi cloud instance.  

In my case, it is `https://timely-joy-94aadb93be.strapiapp.com/admin` Notice I am including the `admin` portion of the url.

To start the transfer, I will type the following in my terminal: You will need to use your URL and Token, which we just generated.

![22-generated-token.png](./images/22-generated-token.png)


``` bash
yarn strapi transfer --to https://timely-joy-94aadb93be.strapiapp.com/admin
```

Then press enter, and it will prompt you for the token that we generated just a minute ago.

``` bash
? Please enter your transfer token for the remote Strapi destination [input is hidden]
```

Paste it in and press `enter` to continue.

You will see the following message, so click `y' and `enter` to continue.

``` bash
The transfer will delete existing data from the remote Strapi! Are you sure you want to proceed? (y/N)
```

You will see the following warning regarding `Review Workflows. ' This is perfectly normal. Press` y' and enter to continue.

You should see a similar output.  

``` bash
Starting transfer...
✔ entities: 40 transfered (size: 31.2 KB) (elapsed: 1059 ms)
✔ assets: 20 transfered (size: 12.7 MB) (elapsed: 15624 ms)
✔ links: 34 transfered (size: 7 KB) (elapsed: 375 ms)
✔ configuration: 34 transfered (size: 92.2 KB) (elapsed: 330 ms)
┌─────────────────────────────────────────┬───────┬───────────────┐
│ Type                                    │ Count │ Size          │
├─────────────────────────────────────────┼───────┼───────────────┤
│ entities                                │    40 │      31.2 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::global.global                   │     1 │ (     759 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::home-page.home-page             │     1 │ (     925 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- api::summary.summary                 │     6 │ (      16 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::i18n.locale                  │     1 │ (     158 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::upload.file                  │     4 │ (     7.8 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::upload.folder                │     1 │ (     170 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::users-permissions.permission │    22 │ (     4.1 KB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::users-permissions.role       │     2 │ (     468 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- plugin::users-permissions.user       │     2 │ (     860 B ) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ assets                                  │    20 │      12.7 MB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ -- .png                                 │    20 │ (    12.7 MB) │
├─────────────────────────────────────────┼───────┼───────────────┤
│ links                                   │    34 │         7 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ configuration                           │    34 │      92.2 KB  │
├─────────────────────────────────────────┼───────┼───────────────┤
│ Total                                   │   128 │      12.8 MB  │
└─────────────────────────────────────────┴───────┴───────────────┘
Transfer process has been completed successfully!
✨  Done in 185.30s.
```

Once you finish, go back into your Strapi Project, which we deployed in the cloud, hit refresh, and you should now see your data.

![23-after-transfer.gif](https://api-prod.strapi.io/uploads/23_after_transfer_ef4ddc2751.gif)

Nice. We just seeded our initial data into our Cloud App.

In the next blog post, we will deploy our front end to **[Vercel](https://vercel.com/)** and connect both projects.

We are on our final stretch. See you in the next post.



large_Next Js Tutorial (2).jpg

medium_Next Js Tutorial (2).jpg

small_Next Js Tutorial (2).jpg

thumbnail_Next Js Tutorial (2).jpg

Next Js Tutorial (2).jpg

Epic Next.js 14 Tutorial Part 9: Backend Deployment To Strapi Cloud

Austin

Marketing

We are making amazing progress. We are now in the final stretch. In this section, we will look at Search and Pagination.

- [Part 1: Learn Next.js by building a website](https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-1-2)
- [Part 2: Building Out The Hero Section of the homepage](https://strapi.io/blog/epic-next-js-14-tutorial-part-2-building-out-the-home-page)
- [Part 3: Finish up up the homepage Features Section, TopNavigation and Footer](https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-3)
- [Part 4: How to handle login and Authentication in Next.js](https://strapi.io/blog/epic-next-js-14-tutorial-part-4-how-to-handle-login-and-authentication-in-next-js)
- [Part 5: File upload using server actions](https://strapi.io/blog/epic-next-js-14-tutorial-part-5-file-upload-using-server-actions)
- [Part 6: Get Video Transcript with OpenAI Function](https://strapi.io/blog/epic-next-js-14-tutorial-part-6-create-video-summary-with-next-js-and-open-ai)
- [Part 7: Strapi CRUD permissions](https://strapi.io/blog/epic-next-js-14-tutorial-part-7-next-js-and-strapi-crud-permissions)
- **Part 8: Search & pagination in Nextjs**
- [Part 9: Backend deployment to Strapi Cloud](https://strapi.io/blog/epic-next-js-14-tutorial-part-9-backend-deployment-to-strapi-cloud)
- Part 10: Frontend deployment to Vercel


![001-search-pagination.png](https://api-prod.strapi.io/uploads/001_search_pagination_8f67ded833.png)

## How To Handle Search In Next.js 

Let's jump in and look at how to implement search with Next.js and Strapi CMS.

First, create a new file inside our `src/components/custom` folder called `Search.tsx` and add the following code.

```tsx
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useDebouncedCallback } from "use-debounce";
import { Input } from "@/components/ui/input";

export function Search() {
  const searchParams = useSearchParams();
  const { replace } = useRouter();
  const pathname = usePathname();

  const handleSearch = useDebouncedCallback((term: string) => {
    console.log(`Searching... ${term}`);
    const params = new URLSearchParams(searchParams);
    params.set("page", "1");

    if (term) {
      params.set("query", term);
    } else {
      params.delete("query");
    }

    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div>
      <Input
        type="text"
        placeholder="Search"
        onChange={(e) => handleSearch(e.target.value)}
        defaultValue={searchParams.get("query")?.toString()}
      />
    </div>
  );
}
```

The secret to understanding how our **Search** component works is to be familiar with the following hooks from Next.js.

* **`useSearchParams`** [docs reference](https://nextjs.org/docs/app/api-reference/functions/use-search-params) It is a Client Component hook that lets you read the current URL's query string.

We use it in our code to get our current parameters from our url.

Then, we use the new `URLSearchParams` to update our search parameters. You can learn more about it [here](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams).

* **`useRouter`** [docs reference](https://nextjs.org/docs/pages/api-reference/functions/use-router) : Allows us to access the router object inside any function component in your app. We will use the replace method to prevent adding a new URL entry into the history stack.

* **`usePathname`** [docs reference](https://nextjs.org/docs/app/api-reference/functions/use-pathname): This is a Client Component hook that lets you read the current URL's pathname. We use it to find our current path before concatenating our new search parameters.

* **`useDebouncedCallback`** [npm reference](https://www.npmjs.com/package/use-debounce): Used to prevent making an api call on every keystroke when using our Search component.

Install the `use-debounce` package from [npm](https://www.npmjs.com/package/use-debounce) with the following command.

```bash
yarn add use-debounce
```

Now, let's look at the flow of our Search component's work by looking at the following.

```tsx
return (
  <div>
    <Input
      type="text"
      placeholder="Search"
      onChange={(e) => handleSearch(e.target.value)}
      defaultValue={searchParams.get("query")?.toString()}
    />
  </div>
);
```

We are using the `defaultValue` prop to set the current search parameters from our URL.

When the `onChange` fires, we pass the value to our `handleSearch` function.

```tsx
const handleSearch = useDebouncedCallback((term: string) => {
  console.log(`Searching... ${term}`);
  const params = new URLSearchParams(searchParams);
  params.set("page", "1");

  if (term) {
    params.set("query", term);
  } else {
    params.delete("query");
  }

  replace(`${pathname}?${params.toString()}`);
}, 300);
```

Inside the `handleSearch` function, we use `replace` to set our new search parameters in our URL.

So whenever we type the query in our input field, it will update our URL.

Let's now add our `Search` component to our code.

Navigate to the `src/app/dashboard/summaries/page.tsx` file with the following code.

```tsx
import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import { Search } from "@/components/custom/Search";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface LinkCardProps {
  id: string;
  title: string;
  summary: string;
}

function LinkCard({ id, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${id}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="w-full mb-4 leading-7">
            {summary.slice(0, 164) + " [read more]"}
          </p>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    query?: string;
  };
}

export default async function SummariesRoute({
  searchParams,
}: Readonly<SearchParamsProps>) {
  // this will gran our search params from the URL that we will pass to our getSummaries function
  const query = searchParams?.query ?? "";

  const { data } = await getSummaries();

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <span>Query: {query}</span>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.id} {...item} />
        ))}
      </div>
    </div>
  );
}
```

![002-search-component.gif](https://api-prod.strapi.io/uploads/002_search_component_1acc5e3645.gif)

Excellent. Now that our `Search` component works, let's move on to the second part. We'll pass our query search through our `getSummaries` function and update it accordingly to allow us to search our queries.

To make the search work, we will rely on the following parameters.

* **sorting**: we will sort all of our summaries in descending order, ensuring that the newest summary appears first.

* **filters**: The filters we will use `$or` operator to combine our search conditions. This means the search will return summaries based on the fields we will filter using `$containsi,` which will ignore case sensitivity.

Let's look inside our `src/data/loaders.ts` file and update the following code inside our `getSummaries` function.

```ts
export async function getSummaries() {
  const url = new URL("/api/summaries", baseUrl);
  return fetchData(url.href);
}
```

Here are the changes we are going to make.

```ts
export async function getSummaries(queryString: string) {
  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}
```

We will create a `query` to filter our summaries on the `title` and `summary.`

Now, we have one more step before testing our search. Let's navigate back to the `src/app/dashboard/summaries` folder and make the following changes inside our `page.tsx` file.

We cannot pass and utilize our query params since we just updated our `getSummaries` function.

```jsx
const { data } = await getSummaries(query);
```

Now, let's see if our search is working.

![003-testing-search.gif](https://api-prod.strapi.io/uploads/003_testing_search_5df12f053e.gif)

Great. Now that our search is working, we can simply move forward with our pagination.

## How To Handle Pagination In Your Next.js Project

### Pagination Basics

Pagination involves dividing content into separate pages and providing users with controls to navigate to the first, last, previous, following, or specific page.

This method improves performance by reducing the amount of data loaded simultaneously. It makes it easier for users to find specific information by browsing through a smaller subset of data.

Let's implement our pagination, but first, let's walk through the code example below, which we will use for our **`PaginationComponent`** inside of our Next.js project.

It is based on the Shadcn UI component that you can take a look at [here](https://ui.shadcn.com/docs/components/pagination);

So, run the following command to get all the necessary dependencies.

```bash
npx shadcn-ui@latest add pagination
```

```tsx
"use client";
import { FC } from "react";
import { usePathname, useSearchParams, useRouter } from "next/navigation";

import {
  Pagination,
  PaginationContent,
  PaginationItem,
} from "@/components/ui/pagination";

import { Button } from "@/components/ui/button";

interface PaginationProps {
  pageCount: number;
}

interface PaginationArrowProps {
  direction: "left" | "right";
  href: string;
  isDisabled: boolean;
}

const PaginationArrow: FC<PaginationArrowProps> = ({
  direction,
  href,
  isDisabled,
}) => {
  const router = useRouter();
  const isLeft = direction === "left";
  const disabledClassName = isDisabled ? "opacity-50 cursor-not-allowed" : "";

  return (
    <Button
      onClick={() => router.push(href)}
      className={`bg-gray-100 text-gray-500 hover:bg-gray-200 ${disabledClassName}`}
      aria-disabled={isDisabled}
      disabled={isDisabled}
    >
      {isLeft ? "«" : "»"}
    </Button>
  );
};

export function PaginationComponent({ pageCount }: Readonly<PaginationProps>) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get("page")) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set("page", pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationArrow
            direction="left"
            href={createPageURL(currentPage - 1)}
            isDisabled={currentPage <= 1}
          />
        </PaginationItem>
        <PaginationItem>
          <span className="p-2 font-semibold text-gray-500">
            Page {currentPage}
          </span>
        </PaginationItem>
        <PaginationItem>
          <PaginationArrow
            direction="right"
            href={createPageURL(currentPage + 1)}
            isDisabled={currentPage >= pageCount}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}
```

Again, we are using our familiar hooks from before to make this work, `usePathname,` `searchParams,` and `useRouter` in a similar way as we did before.

We are receiving `pageCount` via props to see our available pages. Inside the `PaginationArrow` component, we use `useRouter` to programmatically update our URL via the `push` method on click.

Let's add this component to our project. In our `components/custom` folder, create a `PaginationComponent.tsx` file and paste it into the above code.

Now that we have our component, let's navigate to `src/app/dashboard/summaries/page.tsx` and import it.

```tsx
import { PaginationComponent } from "@/components/custom/Pagination";
```

Now update our `SearchParamsProps` interface to the following.

```tsx
interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}
```

Now, let's create a `currentPage` variable to store the current page we get from our URL parameters.

```tsx
const currentPage = Number(searchParams?.page) || 1;
```

Now, we can pass our `currentPage` to our `getSummaries` function.

```tsx
const { data } = await getSummaries(query, currentPage);
```

Now, let's go back to our `loaders. tsx` file and update the `getSummaries` with the following code to utilize our pagination.

```tsx
export async function getSummaries(queryString: string, currentPage: number) {
  const PAGE_SIZE = 4;

  const query = qs.stringify({
    sort: ["createdAt:desc"],
    filters: {
      $or: [
        { title: { $containsi: queryString } },
        { summary: { $containsi: queryString } },
      ],
    },
    pagination: {
      pageSize: PAGE_SIZE,
      page: currentPage,
    },
  });
  const url = new URL("/api/summaries", baseUrl);
  url.search = query;
  return fetchData(url.href);
}
```

In the above example, we use Strapi's `pagination` fields and pass `pageSize` and `page` fields. You can learn more about Strapi's pagination [here](https://docs.strapi.io/dev-docs/api/rest/sort-pagination);

Now back in our `src/app/dashboard/summaries/page.tsx`, let's make a few more minor changes before hooking everything up.

If we look at our `getSummaries` call, we have access to another field that Strapi is returning called `meta.` Let's make sure we are getting it from our response with the following.

```tsx
const { data, meta } = await getSummaries(query, currentPage);
console.log(meta);
```

We will see the following data if we console log our `meta` field.

```js
{ pagination: { page: 1, pageSize: 4, pageCount: 1, total: 4 } }
```

Notice that we have our `pageCount` property. We will use it to tell our **`PaginationComponent`** the number of pages we have available.

So, let's extract it from our `meta` data with the following.

```tsx
const pageCount = meta.pagination.pageCount;
```

And finally, let's use our **`PaginationComponent`** with the following.

```tsx
<PaginationComponent pageCount={pageCount} />
```

The completed code should look like the following.

```tsx
import Link from "next/link";
import { getSummaries } from "@/data/loaders";
import { Search } from "@/components/custom/Search";
import { PaginationComponent } from "@/components/custom/Pagination";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface LinkCardProps {
  id: string;
  title: string;
  summary: string;
}

function LinkCard({ id, title, summary }: Readonly<LinkCardProps>) {
  return (
    <Link href={`/dashboard/summaries/${id}`}>
      <Card className="relative">
        <CardHeader>
          <CardTitle className="leading-8 text-pink-500">
            {title || "Video Summary"}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="w-full mb-4 leading-7">
            {summary.slice(0, 164) + " [read more]"}
          </p>
        </CardContent>
      </Card>
    </Link>
  );
}

interface SearchParamsProps {
  searchParams?: {
    page?: string;
    query?: string;
  };
}

export default async function SummariesRoute({
  searchParams,
}: Readonly<SearchParamsProps>) {
  const query = searchParams?.query ?? "";
  const currentPage = Number(searchParams?.page) || 1;

  const { data, meta } = await getSummaries(query, currentPage);
  const pageCount = meta.pagination.pageCount;

  if (!data) return null;
  return (
    <div className="grid grid-cols-1 gap-4 p-4">
      <Search />
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {data.map((item: LinkCardProps) => (
          <LinkCard key={item.id} {...item} />
        ))}
      </div>
      <PaginationComponent pageCount={pageCount} />
    </div>
  );
}
```

Now, the moment of truth: Let's see if it works. Make sure you add more summaries since our page size is currently set to 4 items. You need to have at least 5 items.

![004-pagination.gif](https://api-prod.strapi.io/uploads/004_pagination_afff3d808b.gif)

Excellent, it is working.

## Conclusion

This Next.js with Strapi CMS tutorial covered how to implement search and pagination functionalities. Hope you are enjoying this tutorial.

We are almost done. We have two more sections to go, including deploying our project to Strapi Cloud and Vercel.

See you in the next post.
