I am working through the “Learn Next.js”-tutorial and I am stuck on this page, specifically on creating the page for editing an invoice. I keep getting the error “404 – Page not found” and I can’t figure out why.

The link in the browser looks e. g. like this:

http://localhost:3000/dashboard/invoices/fc8a2c6e-5efd-4a24-a74e-5d7e85e3ee1b/edit

My file structure looks like this (see on top):

The invoices-page work without a problem – and it shows also the correct link when hovering over the pen:

The component, that shows the edit-button is here:

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>
  );
}

Again: I am using the tutorial “Learn Next.js” – but even after reading through the questions here (in most cases the problem is that [id] is not a folder) I can’t figure it out. I am using the latest version btw.

I tried different “versions” of the route – but as soon as I use [id], I can’t get it to work.