santhosh-s14 / nextjs-dashboard

A Next.js project to learn main features of next.js by building a full stack application

Next.js App Router Course - Starter

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

For more information, see the course curriculum on the Next.js Website.