This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.
- Create Next App
- Global css styling && Tailwind && clsx for conditional styling
- Added custom fonts using next/font module and google fonts
- Added Image component from next/image module for better optimization of images
- Created routes using file-system routing
- A common layout that can be shared between mutiple pages
- Partial rendering, Colocation and root layout concepts
- Navigating between pages using Link component
- Client side navigation
- from next/link
- Automatic code splitting and prefetching
- usePathname hook for getting the current path the user is in and apply css based on condition using clsx
- Added the next js project to Vercel and deployed it
- Created a Postgres storage via Vercel and included the details of the db in .env file
- Seeded the database with inital data
- Fetched data using server components / actions
- Rendered the data in the dashboard
- Saw about the concept of request waterfall and how to improve performance to solve all the requests parallely
- Static vs Dynamic rendering
- Static rendering
- Faster websites
- Reduced server loads
- SEO
- Dynamic rendering
- Real-time data
- User specific content
- Request time information
- Can be made dynamic using unstable_nostore from next/cache
- Added noStore to all the server action calls
- Static rendering
For more information, see the course curriculum on the Next.js Website.