nextjs 正确的文件夹结构和动态路由

Question

所以我有这个传递 href 的链接

   {
      name: "Action",
      cell: (row) => (
        <div className="flex items-center space-x-5">
          <Link href={`/members/${row.id}/edit`}>Edit</Link>
          <button>delete</button>
        </div>
      ),
    },

然后如果我点击它通常应该显示404，但是当我添加一个页面来捕获链接href时它应该显示一些东西

在reactjs中它使用这个代码

<Route path="/members/:id/edit" element={<ExampleName>}

我怎样才能在下一个js中实现这个？

我将附上包含我的 nextjs 的文件夹结构的图像

我希望它显示一个页面，同时浏览器中的链接应该是正确的。

我只是自学，只是阅读文档，但我仍然感到困惑。

蒂亚

Answer 1

根据上面的图片，对于 NextJs 13 中的这条路线

/members/[id]/edit

，文件夹结构如下

/app
  /members
    /[id]
      /edit
        page.tsx
      layout.tsx
      page.tsx
    layout.tsx
    page.tsx
  layout.tsx
  page.tsx