Next.js 15 Tutorial - 11 - File Colocation
Understanding File Collocation in Nex.js
Overview of Routing Conventions
- Nex.js provides routing conventions but allows flexibility in project file and folder structure.
- Each folder in the app directory represents a route segment that maps to a URL path, but routes become publicly accessible only when a
page.jsorpage.tsxfile is added.
Creating Accessible Routes
- A new folder named "dashboard" is created with a file called
lineChart.tsx, defining a simple React component. However, accessing/dashboardresults in a 404 error due to the absence of apage.tsxfile.
- Adding a
page.tsxfile makes the route accessible, but it must export a default React component. An attempt to create an unnamed function leads to an error indicating that it is not recognized as a valid React component.
Key Takeaways on Component Exports
- The correct implementation requires exporting components as default; otherwise, errors will occur. For example, changing the function name to
export default function Dashboard()resolves the issue.