Initialize Next.js with App Router
⏱️ 2-3 hours
npx create-next-app@latest portfolio --typescript --tailwind --appUse App Router for better features
Install Tailwind during setup
⚠️ Common Pitfalls:
Create About, Projects, Blog pages
⏱️ 3-4 hours
export default function About() {
return (
<section className="max-w-4xl mx-auto py-12">
<h1 className="text-4xl font-bold mb-6">About Me</h1>
<p>Your story here...</p>
</section>
)
}Use file-based routing
Create shared layout
⚠️ Common Pitfalls:
Set up MDX for blog posts
⏱️ 4-5 hours
import createMDX from "@next/mdx"
const withMDX = createMDX()
export default withMDX(nextConfig)Install @next/mdx
Configure MDX in next.config
⚠️ Common Pitfalls:
Showcase projects with images
⏱️ 3-4 hours
const projects = [
{
title: "E-commerce Store",
image: "/projects/ecommerce.png",
tech: ["Next.js", "Stripe"],
link: "https://example.com"
}
]Use next/image for optimization
Create project cards
⚠️ Common Pitfalls:
Add contact form with validation
⏱️ 2-3 hours
"use server"
export async function sendEmail(formData: FormData) {
const email = formData.get("email")
const message = formData.get("message")
// Send email using Resend
}Use Server Actions
Add email service (Resend)
⚠️ Common Pitfalls:
Deploy to Vercel with analytics
⏱️ 1-2 hours
git push origin main
# Auto-deploys via VercelConnect GitHub to Vercel
Enable Vercel Analytics
⚠️ Common Pitfalls: