데브허브 | DEVHUB | 🔴 Let's build a Next-Gen AI Portfolio with NEXT.JS 16 (OpenAI AgentKit, MCP, Sanity, Clerk)

1️⃣ Get Started with Sanity 👉 https://www.sanity.io/sonny?utm_sourc...
2️⃣ Get Started with Clerk 👉 https://go.clerk.com/O6Jzq2c

❗️Get the Full Source Code for FREE here 👉 https://www.papareact.com/next-gen-po...

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

🛠️ Looking for the Code for this build? (Plus over 55+ others!)  
https://links.papareact.com/github

🎯 What You’ll Learn
🚀 Modern Tech Stack (Using the NEWEST Releases!):
Next.js 16 - JUST RELEASED! React 19 with App Router, Turbopack, and Server Components
OpenAI’s BRAND NEW AgentKit & ChatKit* - OpenAI’s latest release for building AI agents with streaming chat
Sanity CMS - Headless CMS with custom schemas, Studio dashboard, VISUAL EDITING with Presentation Tool
Clerk - Complete authentication with customizable components
Tailwind CSS v4 - Modern utility-first styling
Framer Motion - Smooth animations and micro-interactions
Aceternity UI - Stunning animated components (dotted glow backgrounds, ripple effects, comet cards)

💻 Core Features:
AI Twin Chat - Built with OpenAI’s NEW ChatKit - 3 personality modes (Crisp, Clear, Chatty)
Dual App Architecture - Public portfolio + Sanity Studio CMS in one codebase
Visual Content Editing - Edit in Sanity Studio and see changes LIVE with Presentation Tool
Dynamic Hero Section - Animated text-flipping headlines
Comprehensive Sections - Skills charts, experience timeline, projects, blog, testimonials, achievements
Floating Navigation Dock - Beautiful macOS-style dock
Real-Time Content - Live updates with Sanity’s Live API and draft mode preview

🛠️ Advanced Concepts:
OpenAI AgentKit Integration - NEW framework for AI agents with context awareness
Sanity Visual Editing - Presentation Tool with side-by-side editing and live preview
Draft Mode - Preview unpublished content before going live
GROQ Queries - Powerful filtering with Sanity’s query language + Vision tool playground
Server Actions - Form submissions with Next.js 16
Type Safety - End-to-end TypeScript with auto-generated Sanity types
Accessibility First - Radix UI primitives

🚀 Production Skills:
Dual App Deployment - Portfolio on Vercel + Sanity Studio hosting
Content Management - 61 sample documents with automated import scripts
Custom UI Components - Aceternity UI animations, animated testimonials, world maps, charts (Recharts)
Icon Systems - Lucide React + Tabler Icons
Modern Tooling - Biome for ultra-fast linting and formatting
SEO Optimization - Metadata configuration and structured content
Performance - Server Components, image optimization, and fast page loads

Perfect for developers who want to learn the LATEST technologies:
Next.js 16 | OpenAI’s AgentKit & ChatKit | Sanity Visual Editing | Aceternity UI | Production-ready tooling

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter

🕐 TIMESTAMPS:
0:00 Introduction
1:03 Build Demo
10:52 Clerk for Authentication
11:05 Sanity Powering the Backend
16:47 Build Tech Stack Breakdown
23:12 Why Use Sanity & Clerk
25:37 Initialising the Build
30:08 Setting Up Clerk
33:20 Setting Up Sanity
38:51 Setting Up Sanity Schemas
44:53 Sanity CMS Structuring 
58:39 Displaying Sanity Backend Data on the Frontend
1:05:53 Setting Up Shadcn
1:09:01 Building the Hero Section of the Portfolio (w/ Aceternity UI)
1:36:50 Implementing a Sidebar for “Chat with my AI Twin” Functionality
1:43:55 Building the About Section
1:48:29 Building the “Chat with my AI Twin” Functionality
1:56:47 Implementing OpenAI AgentKit & ChatKit
2:07:55 Explaining & Implementing Sanity MCP Tools
2:13:48 Connecting Sanity’s MCP Server to OpenAI AgentKit
2:28:06 Implementing OpenAI ChatKit in the Portfolio
2:45:01 Building the Testimonials Section
2:52:16 Building the Skills Section
2:57:25 Building the Experience Section
2:59:29 Building the Education Section
3:00:05 Building the Projects Section
3:02:05 Building the Certifications Section
3:05:11 Building the Achievements, Services & Blog Sections
3:07:18 Building the Contact Section 
3:22:08 Implementing the Floating Dock
3:27:04 Implementing Dark Mode Functionality
3:30:27 Implementing Sanity’s Visual Editing Feature
3:40:45 SKIP
3:43:32 Final Build Fixes
3:47:48 Deploying to Vercel
4:11:58 Final Deployed Build Demo & Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

#nextjs16 #portfolio #openai #agentkit #react19 #ai #nextgen #clerk #sanity #learning #coding #nextjs #tutorial #beginner #programming

🔴 Let's build a Next-Gen AI Portfolio with NEXT.JS 16 (OpenAI AgentKit, MCP, Sanity, Clerk) | 2026

스프링 네이티브 GraalVM : 3. 윈도우즈 환경 WSL 설치

Save $$$ with Fluent Assertions Alternatives

Sunday Morning Multiplayer Dev - Live Godot Game Development

Can AI Agents Finally Automate the Web? (BrowserOS Review)

귀찮은 문제를 한 번에 해결해주니 3배씩 성장하더라고요 | 더그리트 양우정

AI 도입 후 시작된 '지식 노동의 쇠퇴'