Moving forward, we'll delve into advanced concepts that are optional for some apps or projects. However, gaining knowledge of these concepts can be highly beneficial.

Back to the Project

Let's shift our focus to the Invoices page and proceed with its development.

Please copy and paste the following code into app/dashboard/invoices/page.tsx. Take some time to inspect and understand the purpose of this code.

app/dashboard/invoices/page.tsx

import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import Table from '@/app/ui/invoices/table';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import { poppins } from '@/app/ui/fonts';
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
import { Suspense } from 'react';

export default async function Page() {
  return (
    <div className="w-full rounded-xl bg-neutral-900 p-6">
      <div className="flex w-full items-center justify-center">
        <h1
          className={`${poppins.className} text-center text-xl text-white md:text-3xl`}
        >
          Invoices
        </h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Find invoice" />
        <CreateInvoice />
      </div>
      {/* <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>
  );
}

The application has three key features:

Search lets users look for specific invoices;
Pagination allows them to navigate between pages of invoices;
Table shows all the invoices available.

The search functionality works on both the client and the server. When a user searches for an invoice on the client, the URL parameters are updated, and data is fetched from the server. Finally, the table is re-rendered on the server side with the updated data.

We will use URL search parameters to handle the search state, which might be new if you're accustomed to using a client-side state.

Benefits include:

Users can bookmark or share the current application state, including search queries and filters, as the parameters are part of the URL;
URL parameters facilitate server-side rendering, directly simplifying the initial state setup on the server;
With search details in the URL, tracking user behavior becomes easier, requiring less client-side logic.

Let's proceed with this idea in the upcoming chapter.

In Practice

Все було зрозуміло?

Секція 6. Розділ 1

Зміст курсу

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

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

6. Advanced Features

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

7. Authentication