Next JS Realtime Project

Introduction to Next.js 15 and Project Setup

Concept :

• Introduction to Next.js 15
• Differences between App Router and Pages Router (focus on App Router)
• Folder structure overview
• Client vs Server Components
• Setting up TypeScript and Tailwind CSS
• Adding custom fonts and global styling

Hands-On:

• Create a new project with App Router
• Configure Tailwind and create base layout

Routing, Layouts, and Metadata

Concepts:

• Nested and dynamic routes
• Route groups and intercepting routes
• Shared layouts and templates

Hands-On:

• Error and loading UI patterns
• Generating metadata with generateMetadata
• Build a Portfolio or Blog site structure
• Implement 404 and error boundaries

Data Fetching and API Routes

Concepts:

• Static Site Generation (SSG) with generateStaticParams
• Server Side Rendering (SSR) with getServerSideProps
• Client fetching using SWR or React Query
• API routes and route handlers
• Middleware and Edge Functions

Hands-On:

• Build a blog or dashboard with static and dynamic pages
• Add a contact API route
• Implement middleware for auth logging

Authentication and State Management

Concepts:

• Setting up NextAuth.js for OAuth and credentials
• Session-based auth and JWTs

Hands-On:

• Form handling with React Hook Form and Zod
• State management using Zustand, Redux, or Context API
• Implement Login, Signup with validations
• Build Protected Routes and Role-based Dashboard

TypeORM & Database Integration

Concepts:

• TypeORM with PostgreSQL
• Schema definition, migration, and relations
• CRUD operations with TypeORM Client

Hands-On:

• Build DB models (User, Post, Comment)
• Connect APIs to TypeORM
• Add validation and relationships

Deployment & Final Project

Concept:

• Vercel deployment and ENV management
• CI/CD with GitHub Actions

Final Project:

• SEO best practices with metadata, sitemap, robots.txt
• Performance tuning with Lighthouse & Web Vitals
• Build a complete SaaS app or Job Board
• Implement features from all modules
• Deploy to Vercel + GitHub source code

Deliverables

• GitHub Repository
• Deployed URL (Vercel)
• Swagger/Postman API collection
• Final Demo Presentation and Video

Outcome

• Master Modern Web Development with Next.js 15
• Build End-to-End Web Applications
• Work with Real-World Technologies
• Develop a Production-Ready Project
• Be Interview and Job Ready

Certification

• Awarded after successful project submission and review
• Course Completion Certificate