During my journey with the Next.js course, I built a simplified version of a financial dashboard. This project is the culmination of learned skills and knowledge where I have implemented several practical web development areas using Next.js.
- Public Home Page: The application features a publicly accessible homepage.
- Login Page: The application includes a login page, ensuring only authenticated access to the dashboard.
- Protected Dashboard: The dashboard is protected by authentication, leading to the display of user-specific information.
- Invoice Management: Users can add, edit, and delete invoices, thereby offering interactivity and dynamic data rendering.
Behind the scenes, a database was setup to support the functioning of the dashboard.
- Styling & Optimizations: I learned the different approaches to style a Next.js application and successfully optimized images, links, and fonts for better performance.
- Routing & Fetching Data: The course helped me to understand Next.js file-system routing, creating nested layouts and pages, and best practices for setting up a database on Vercel for fetching and streaming data.
- Search & Pagination: I implemented search and pagination functionalities using URL Search Params.
- Mutating Data: I gained practical knowledge of mutating data using React Server Actions and revalidated the Next.js cache accordingly.
- Error Handling: I learned to handle general and 404 not found errors effectively.
- Server-Side Validation & Accessibility: I implemented server-side form validation and learned techniques to improve the application's accessibility.
- Authentication: The application features authentication using NextAuth.js and Middleware, enabling secure access.
- Metadata: I understood the importance of adding metadata to prepare the application for social sharing.
- Node.js 18.17.0 or later installed. Download here.
- Operating systems: macOS, Windows (including WSL), or Linux.
- Vercel account