To enable users to navigate through different pages and view all invoices, implement pagination using URL parameters, similar to the search functionality.

Back to the Project

Step 1

If you navigate to the Pagination component, you see that it is a client component. To avoid exposing database secrets, refrain from fetching data on the client side. Instead, fetch the data on the server and pass it as a prop to the component;
In app/dashboard/invoices/page.tsx, import a new function called fetchInvoicesPages and pass the search query from searchParams as an argument:
- fetchInvoicesPages calculates the total number of pages based on the search query. For instance, if there are 12 matching invoices with a display of 6 per page, the total number of pages would be 2.
Pass the totalPages prop to the <Pagination/> component.

app/dashboard/invoices/page.tsx

// ...
import { Suspense } from 'react';
import { fetchInvoicesPages } from '@/app/lib/data';

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {
  const query = searchParams?.query || '';
  const currentPage = Number(searchParams?.page) || 1;

  const totalPages = await fetchInvoicesPages(query);

  return (
    <div className="w-full rounded-xl bg-neutral-900 p-6">
      {/* ... */}
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      <div className="mt-5 flex w-full justify-center">
        <Pagination totalPages={totalPages} />
      </div>
    </div>
  );
}

Step 2

Navigate to the app/ui/invoices/pagination.tsx;
Import the usePathname and useSearchParams hooks;
Use these hooks to retrieve the current page and set the new page;
Uncomment the code in this component.

Note
Your application may temporarily break as the <Pagination/> logic is not yet implemented. We will work on it later.

app/ui/invoices/pagination.tsx

// ...
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';

export default function Pagination({ totalPages }: { totalPages: number }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get('page')) || 1;

  // Attention! Uncomment this section when you reach this stage in the course.

  // const allPages = generatePagination(currentPage, totalPages);

  return (
    <>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="inline-flex">
        <PaginationArrow
          direction="left"
          href={createPageURL(currentPage - 1)}
          isDisabled={currentPage <= 1}
        />

        <div className="flex -space-x-px">
          {allPages.map((page, index) => {
            let position: 'first' | 'last' | 'single' | 'middle' | undefined;

            if (index === 0) position = 'first';
            if (index === allPages.length - 1) position = 'last';
            if (allPages.length === 1) position = 'single';
            if (page === '...') position = 'middle';

            return (
              <PaginationNumber
                key={page}
                href={createPageURL(page)}
                page={page}
                position={position}
                isActive={currentPage === page}
              />
            );
          })}
        </div>

        <PaginationArrow
          direction="right"
          href={createPageURL(currentPage + 1)}
          isDisabled={currentPage >= totalPages}
        />
      </div>
    </>
  );
}

// ...

Step 3

Inside the <Pagination> component, create a new function called createPageURL;
Similar to the search functionality, utilize URLSearchParams to set the new page number;
Use pathName to construct the URL string;
Uncomment the allPages variable.

Explanation of createPageURL function

createPageURL generates an instance of the current search parameters;

It then updates the "page" parameter with the provided page number;

Finally, it constructs the complete URL using the pathname and the updated search parameters;

The remaining logic in the Pagination component handles styling. While we won't delve into these details in this course, feel free to explore the code.

app/ui/invoices/pagination.tsx

// ...

export default function Pagination({ totalPages }: { totalPages: number }) {
  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()}`;
  };

  // Attention! Uncomment this section when you reach this stage in the course.

  const allPages = generatePagination(currentPage, totalPages);

  return (
    <>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="inline-flex">
        {/* ... */}
      </div>
    </>
  );
}

// ...

Step 4

Final step - when the user inputs a new search query, it's essential to reset the page number to 1. To achieve this, update the handleSearch function in the app/ui/search.tsx.

app/ui/search.tsx

// ...

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

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    params.set('page', '1');

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

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

  return (
    <div className="relative flex flex-1 flex-shrink-0">
     {/* ... */}
    </div>
  );
}

In Practice

Everything was clear?

Section 6. Chapter 3

Course Content

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

Project Set Up Project File-Folder Strcture Styling Approaches Adding the Global CSS File Tailwind Styling CSS Modules Conditionally Applying Styles Custom Google Fonts Challenge: Adding Custom Google Font Images

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

How to Fetch Data Working with the Dashboard Page Practice and Challenge: Retrieving Data Dynamic vs Static Rendering Loaders Specific Parts Loaders Challenge: Skeleton Loader Grouping Components for Loaders

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Understanding Authentication Login Route NextAuth.js Authentication Configuration & Route Protection Password Hashing & Credentials Sign-in Functionality Connecting UI & Functionality Logout Functionality What's Next?

Next.js 14

Pagination

To enable users to navigate through different pages and view all invoices, implement pagination using URL parameters, similar to the search functionality.

Back to the Project

Step 1

If you navigate to the Pagination component, you see that it is a client component. To avoid exposing database secrets, refrain from fetching data on the client side. Instead, fetch the data on the server and pass it as a prop to the component;
In app/dashboard/invoices/page.tsx, import a new function called fetchInvoicesPages and pass the search query from searchParams as an argument:
- fetchInvoicesPages calculates the total number of pages based on the search query. For instance, if there are 12 matching invoices with a display of 6 per page, the total number of pages would be 2.
Pass the totalPages prop to the <Pagination/> component.

app/dashboard/invoices/page.tsx

// ...
import { Suspense } from 'react';
import { fetchInvoicesPages } from '@/app/lib/data';

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  };
}) {
  const query = searchParams?.query || '';
  const currentPage = Number(searchParams?.page) || 1;

  const totalPages = await fetchInvoicesPages(query);

  return (
    <div className="w-full rounded-xl bg-neutral-900 p-6">
      {/* ... */}
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      <div className="mt-5 flex w-full justify-center">
        <Pagination totalPages={totalPages} />
      </div>
    </div>
  );
}

Step 2

Navigate to the app/ui/invoices/pagination.tsx;
Import the usePathname and useSearchParams hooks;
Use these hooks to retrieve the current page and set the new page;
Uncomment the code in this component.

Note
Your application may temporarily break as the <Pagination/> logic is not yet implemented. We will work on it later.

app/ui/invoices/pagination.tsx

// ...
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';

export default function Pagination({ totalPages }: { totalPages: number }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get('page')) || 1;

  // Attention! Uncomment this section when you reach this stage in the course.

  // const allPages = generatePagination(currentPage, totalPages);

  return (
    <>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="inline-flex">
        <PaginationArrow
          direction="left"
          href={createPageURL(currentPage - 1)}
          isDisabled={currentPage <= 1}
        />

        <div className="flex -space-x-px">
          {allPages.map((page, index) => {
            let position: 'first' | 'last' | 'single' | 'middle' | undefined;

            if (index === 0) position = 'first';
            if (index === allPages.length - 1) position = 'last';
            if (allPages.length === 1) position = 'single';
            if (page === '...') position = 'middle';

            return (
              <PaginationNumber
                key={page}
                href={createPageURL(page)}
                page={page}
                position={position}
                isActive={currentPage === page}
              />
            );
          })}
        </div>

        <PaginationArrow
          direction="right"
          href={createPageURL(currentPage + 1)}
          isDisabled={currentPage >= totalPages}
        />
      </div>
    </>
  );
}

// ...

Step 3

Inside the <Pagination> component, create a new function called createPageURL;
Similar to the search functionality, utilize URLSearchParams to set the new page number;
Use pathName to construct the URL string;
Uncomment the allPages variable.

Explanation of createPageURL function

createPageURL generates an instance of the current search parameters;

It then updates the "page" parameter with the provided page number;

Finally, it constructs the complete URL using the pathname and the updated search parameters;

The remaining logic in the Pagination component handles styling. While we won't delve into these details in this course, feel free to explore the code.

app/ui/invoices/pagination.tsx

// ...

export default function Pagination({ totalPages }: { totalPages: number }) {
  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()}`;
  };

  // Attention! Uncomment this section when you reach this stage in the course.

  const allPages = generatePagination(currentPage, totalPages);

  return (
    <>
      {/* Attention! Uncomment this section when you reach this stage in the course. */}

      <div className="inline-flex">
        {/* ... */}
      </div>
    </>
  );
}

// ...

Step 4

Final step - when the user inputs a new search query, it's essential to reset the page number to 1. To achieve this, update the handleSearch function in the app/ui/search.tsx.

app/ui/search.tsx

// ...

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

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams);
    params.set('page', '1');

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

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

  return (
    <div className="relative flex flex-1 flex-shrink-0">
     {/* ... */}
    </div>
  );
}

In Practice

Everything was clear?

Section 6. Chapter 3