Hello I am on chapter 12 of the learning doc and on steps 1-3 once finishing step 3 my web page does not display and i get a 404 error. I have refollowed the whole chapter 3 times and re-read everything and I just can't find what I am doing wrong.

I could post all the relevant code here but I'm not sure if that is too bloated, I could also zip the whole folder and upload it. For now I will just post the 3 relevant blocks of code here.

My table.tsx

My page.tsx in invoices/id/edit/page.tsx

import Form from '@/app/ui/invoices/edit-form';
import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
 
export default async function Page({ params }: { params: { id: string } }) {
  const id = params.id;
  const [invoice, customers] = await Promise.all([
    fetchInvoiceById(id),
    fetchCustomers(),
  ]);
  return (
    <main>
      <Breadcrumbs
        breadcrumbs={[
          { label: 'Invoices', href: '/dashboard/invoices' },
          {
            label: 'Edit Invoice',
            href: `/dashboard/invoices/${id}/edit`,
            active: true,
          },
        ]}
      />
      <Form invoice={invoice} customers={customers} />
    </main>
  );
}

line 16-25 in my buttons.tsx

export function UpdateInvoice({ id }: { id: string }) {
  return (
    <Link
      href={`/dashboard/invoices/${id}/edit`}
      className="rounded-md border p-2 hover:bg-gray-100"
    >
      <PencilIcon className="w-5" />
    </Link>
  );
}

Thank you in advance for anyone who tries to help me I really appreciate you ❤️