🧭 Day 30 — Capstone Project II: Polish & Deployment

Zero to Hero — Hands-on Next.js Tutorial

WE MADE IT! 30 Days of Next.js. Today, we finish our AI Chatbot by making it look beautiful and launching it to the internet.

🟦 1. Markdown Support

AI doesn’t just return text; it returns Markdown (code blocks, bold text, lists). Let’s render it properly using react-markdown.

npm install react-markdown

Update page.tsx:

import ReactMarkdown from 'react-markdown';

// ... inside the map loop ...
<div className={m.role === 'user' ? 'bg-blue-100' : 'bg-gray-100'}>
  <ReactMarkdown>{m.content}</ReactMarkdown>
</div>

🟩 2. Styling (Tailwind Polish)

Let’s make it look like a real app.

1. User Bubble: Blue background, right aligned.
2. AI Bubble: Gray background, left aligned.
3. Input Area: Sticky footer with a nice shadow.

{messages.map(m => (
  <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'} mb-4`}>
     <div className={`rounded-lg p-4 max-w-[80%] ${
       m.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800'
     }`}>
       <ReactMarkdown className="prose">{m.content}</ReactMarkdown>
     </div>
  </div>
))}

🟧 3. Deployment (Vercel)

Next.js is built by Vercel. Deployment is zero-config.

1. Push your code to GitHub.
2. Go to vercel.com and Sign Up.
3. Click “Add New Project” -> Import from GitHub.
4. Important: Add your Environment Variables (OPENAI_API_KEY) in the Vercel Dashboard during import.
5. Click Deploy.

In ~1 minute, you will have a live URL (e.g., next-hero-ai.vercel.app) that scales globally.

🟥 4. The End of the Beginning

You have gone from “Hello World” to a “Full Stack AI App” in 30 days.

What you learned:

• App Router & File System Routing
• Server Components vs. Client Components
• Data Fetching & Caching
• Streaming & Suspense
• Server Actions (Mutations)
• Auth, Database (Prisma), & Deployment

Where to go next?

• Build a SaaS functionality (Stripe integration).
• Explore advanced SEO (Sitemaps, JSON-LD).
• Deep dive into React Server Actions (Optimistic UI).

Thank you for coding along with CodeCompass. Keep building! 🚀