Зміст курсу

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

Deleting Item

Let's implement the delete functionality for the invoice.

Back to the Project

To utilize a Server Action for deleting an invoice, enclose the delete button within a <form> element and transmit the id to the Server Action using the bind feature:

app/ui/invoices/buttons.ts

// ...
import { deleteInvoice } from '@/app/lib/actions';

export function CreateInvoice() {
  //  ...
}

export function UpdateInvoice({ id }: { id: string }) {
  // ...
}

export function DeleteInvoice({ id }: { id: string }) {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);

  return (
    <form action={deleteInvoiceWithId}>
      <button className="rounded-md border bg-sky-700 p-2 text-white hover:bg-white hover:text-neutral-900">
        <span className="sr-only">Delete</span>
        <TrashIcon className="w-5" />
      </button>
    </form>
  );
}

To complete the task, we create the deleteInvoice action.

app/lib/actions.ts

// ...

export async function createInvoice(formData: FormData) {
  //  ...
}

export async function updateInvoice(id: string, formData: FormData) {
  // ...
}

export async function deleteInvoice(id: string) {
  await sql`DELETE FROM invoices WHERE id = ${id}`;
  revalidatePath('/dashboard/invoices');
}

As you can see, we are not using redirect() because the delete action is called on the dashboard/invoices page.

In Practice

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

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

Зміст курсу

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

Deleting Item

Let's implement the delete functionality for the invoice.

Back to the Project

To utilize a Server Action for deleting an invoice, enclose the delete button within a <form> element and transmit the id to the Server Action using the bind feature:

app/ui/invoices/buttons.ts

// ...
import { deleteInvoice } from '@/app/lib/actions';

export function CreateInvoice() {
  //  ...
}

export function UpdateInvoice({ id }: { id: string }) {
  // ...
}

export function DeleteInvoice({ id }: { id: string }) {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);

  return (
    <form action={deleteInvoiceWithId}>
      <button className="rounded-md border bg-sky-700 p-2 text-white hover:bg-white hover:text-neutral-900">
        <span className="sr-only">Delete</span>
        <TrashIcon className="w-5" />
      </button>
    </form>
  );
}

To complete the task, we create the deleteInvoice action.

app/lib/actions.ts

// ...

export async function createInvoice(formData: FormData) {
  //  ...
}

export async function updateInvoice(id: string, formData: FormData) {
  // ...
}

export async function deleteInvoice(id: string) {
  await sql`DELETE FROM invoices WHERE id = ${id}`;
  revalidatePath('/dashboard/invoices');
}

As you can see, we are not using redirect() because the delete action is called on the dashboard/invoices page.

In Practice

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

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

some-alt