CODEWITHSUNDEEP
next.jsnextjs-dynamic-routing
webwurm
webwurm

Reputation: 89

Learn Next.js: Dynamic route returns 404

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):

enter image description here

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

enter image description here

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.

Upvotes: 1

Views: 189

Answers (2)

Garlic Bread
Garlic Bread

Reputation: 1

Although I'm guessing that the tutorial has been updated since you started it, I'll include my experience with this portion. The version I saw says, "page components also accept a prop called params which you can use to access the id", which means that before assigning id I first had to define const params = await props.params.

For others, double check that your folder hierarchy is under dashboard, not ui (which is what I did wrong).

Upvotes: 0

Marcelo Rossi
Marcelo Rossi

Reputation: 384

This happened to me. It was due to page.tsx incorrectly located.

Please check again that you have created the page.tsx inside edit folder and not in [id] folder.

Best.

Upvotes: 0

Related Questions