Search code examples
next.jsdirectory-structure

nextjs correct folder structure and dynamic routing

So i have this Link which passing a 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>
      ),
    },

then if i click that it is normally should show 404, but when i add a page to catch the link href it should show something

in reactjs it use this code <Route path="/members/:id/edit" element={<ExampleName>} enter image description here

how can i achieve this in next js?

i will attach image contains the folder structure of my nextjs

folderstructure

i am expecting it to show a page and at the same the links in browser should be correct.

I am self learning only and just reading documentation, but i still get confuse.

TIA

Solution

  • Based on your image above, for this route /members/[id]/edit in NextJs 13 the folder structure is like this

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

    You also need to know more about the route group if later I assume that the member has more than 1 rights, like edit and delete