nextjs-courses-you-wish

A Nextjs Courses you wish you had known sooner. I will walk through from the fundamentals to advanced real-life features. I will cook that with the greatest ingredients: RAG, AI, Nextjs 15, RSC, PostgreSQL, Auth, React 19, Tanstack Query, and TailwindCss V4... Coming Soon - Do not rush

The journey we will cooks

Fundamental Path

• The basic principles of working with Next.js and App Router.
• React Server Components (RSC) and data fetching methods within them.
• The creation of API routes and the application of Server Actions for data modification.
• Client-side data fetching with React Query and interaction with Server Actions and API routes.
• Caching strategies in Next.js 15.
• Authentication and protection of routes and pages.
• Practical experience in developing a full-fledged application.
• Automatic optimization of Next.js builds depending on static and dynamic routes.

Real Product Path

We will build a Huly clone app with the following features:

Key Features

• SEO features:
  • Sitemap
  • Rss Feed
  • JsonLD
  • Optimize performance
• 📱 Responsive Design
• Realtime chat with AI + Team members
• User Management
• 📝 Content Management(Text Editors) + Create documents/tickets + AI summarize features
• 📊 CRUD Table
• 🖼️ Upload Media like Image/Video/Documents on S3 Storage
• 🔒 Authentication + Authorization with ACL/RBAC
• 📊 Dashboard Reporting

TechStack

Engineering Setup

• Cursor: Code AI Editor
• v0.dev: Generative UI components
• Model:
  • Claude Sonnet 3.7: Agent AI in Cursor
  • Grok: Ask about technique stuff
  • Perplexity: Research topic
  • Qwq 32B

AI Tools

• Interface LLMs: OpenRouter
• Open AI keys
• n8n workflows crawls and take the summarization of articles on Internet
• Cursor AI Rules help AI improve Context Awareness, Project-Specific Knowledge, and the Consistency.

Frontend

• Fetching API: Better Fetch
• Auth Client: Better Auth
• State Management: XState
• Components: Use @shadcn/ui + Storybook to overview components
• Web: Use Nextjs 15 & React 19 & Tanstack Query
• Animation: Using Motion & Swup for smooth transition/animation

Backend

• Database: PostgresSQL + PG Vectorize
• Use Polar for payments, unified API for one-off & subscription billing methods
• Queue: Handle the heavy workload on the background(client/server)
• ORM: Use Prisma
• Validation schema: Zod
• Email: Resend Build and send emails using React
• Cache: BentoCache --> In Memory + DragonFly(Redis) cache
• Rate Limit
• AxiomJs all you need to debug, log & analyze in production
• Secure Headers

Infrastructure

• Deploy with Docker --> AWS EC2
• Infrastructure as Code with Terraform --> automate the process of deploy + Zero Downtime Strategy
• CDN zero-config, low-latency, request life-cycle hooks, optimized request compressions (gzip)
• Traefik Integration: Automatically integrates with Traefik for routing and load balancing.
• Real-time Monitoring: Monitor CPU, memory, storage, and network usage for every resource.
• Compliance as Code, Policy as Code
• Detect, visualize, analyze and remediate security vulnerabilities
• Secure AWS Cloud and write secure IaC
• Secret Management

CI/CD

• Automatically release process with Github Action
• Self-test CI/CD in local first with Act
• Have a lot of Bot/CLI(Rabbit AI, KnipJs, OXC...) + Checklist Guideline to help project always in high quality

Development Experiences

• Use Git Workflow + Semantic commit + Rabbit AI to have great commit + review code!
• Spell checker will notified once there had typos
• Code Snippets say goodbye to the boilerplate
• Package Manager: Bun
• Leverage the UnJs ecosystem to have some incredible features like Auto Import and Framework Agnostic