File-system-based routing turns a project’s folder and file structure into application URL routes. In a Next.js dashboard, this reduces routing configuration while supporting nested pages, multiple layouts, and error handling. section 6.1
The approach fits a dashboard that lets users upload files and review associated data. A page can link each uploaded filename to a details route, so the URL identifies which file the user selected. section 6.6.2 section 6.9
Dynamic file details route
Create src/app/fileDetails/[id]/page.tsx. The [id] directory declares a dynamic URL parameter, allowing routes such as /fileDetails/0854b018-c5ce-4e00-8a4f-d268a1a85aa2. A filename link can navigate to /fileDetails/${row.id}, passing the selected file’s UUID to the details page. section 6.6.2
Listing 6.31 Updated RecentAchUploads
<TableCell>
<Link onClick={() => #1
route.push(`/fileDetails/${row.id}`)}> #1
{row.filename} #1
</Link>
</TableCell>
Shows the dashboard link that constructs a file-details URL from each uploaded row’s identifier. section 6.6.2
Listing 6.32 Folder structure for the file details page
src/ ├─ app/ │ ├─ fileDetails/ │ │ ├─ [id]/ #1 │ │ │ ├─ page.tsx
Shows the app-directory structure that makes the file-details route and its dynamic parameter discoverable from the filesystem. section 6.6.2
