Learn Next.js: Dynamic route returns 404

Question

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.

I have the same issue. Maybe a course bug?

Marcelo Rossi
– Marcelo Rossi

2024-07-21 23:04:08 +00:00
Commented Jul 21, 2024 at 23:04 — Marcelo Rossi
– Marcelo Rossi, Commented Jul 21, 2024 at 23:04

Marcelo Rossi · Accepted Answer · 2024-07-22 00:53:19Z

0

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.

answered Jul 22, 2024 at 0:53

Marcelo Rossi

3943 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Garlic Bread · Accepted Answer · 2025-02-24 22:44:15Z

0

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

answered Feb 24 at 22:44

Garlic Bread

11 bronze badge

Collectives™ on Stack Overflow

Learn Next.js: Dynamic route returns 404

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related