# Building a Next.js Blog with Dynamic Comments: My Journey to a Modern Web Experience In today's fast-paced web world, a blog isn't just a place to share thoughts — it's an immersive, interactive platform that invites readers to engage and come back for more. Recently, I built a fully-featured blog application using **Next.js**, **TypeScript**, and **Tailwind CSS**, focusing on a dynamic commenting system and modern UI. Along the way, I encountered some fascinating challenges and learned a lot — here’s what I want to share with you. --- ## Why Build a Custom Blog? You might wonder: *Why not just use WordPress, Medium, or other off-the-shelf platforms?* For me, the answer was two-fold: * **Flexibility**: Total control over how posts and comments are handled, displayed, and styled. * **Learning**: A chance to deepen my skills with modern React, Next.js APIs, and utility-first CSS with Tailwind. Plus, building something from scratch means every feature reflects my vision and workflow — no compromises. --- ## Key Features & How I Built Them ### 1. Dynamic Commenting with Real-Time Updates A smooth commenting experience is critical for user engagement. I designed a comment system where new comments appear immediately without a page refresh — just like Instagram’s comment feed. Here’s a simplified snippet showing how I fetch and display comments dynamically with React hooks: ```tsx const [comments, setComments] = useState([]); const [newComment, setNewComment] = useState(""); useEffect(() => { async function fetchComments() { const res = await fetch(`/api/comments?postId=${postId}`); const data = await res.json(); setComments(data); } fetchComments(); }, [postId]); async function handleAddComment() { if (!newComment.trim()) return; const res = await fetch('/api/comments', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ postId, text: newComment }), }); if (res.ok) { const savedComment = await res.json(); setComments(prev => [savedComment, ...prev]); // prepend new comment setNewComment(""); } } ``` To enhance UX, I added avatars using users’ initials and formatted timestamps with a handy `timeAgo` function: ```tsx function timeAgo(dateString: string) { const now = new Date(); const date = new Date(dateString); const diff = Math.floor((now.getTime() - date.getTime()) / 1000); // seconds ago if (diff < 60) return `${diff} seconds ago`; if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`; if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`; return `${Math.floor(diff / 86400)} days ago`; } ``` This combination creates a modern, responsive comments experience users appreciate. --- ### 2. Category Filtering and Search I wanted readers to find relevant posts quickly. For this, I implemented category filtering and search — synced with URL queries for seamless sharing and navigation. Here's how I handle URL query params in Next.js with React hooks: ```tsx import { useRouter } from 'next/router'; const router = useRouter(); const { category, search } = router.query; useEffect(() => { async function fetchPosts() { let url = '/api/posts?'; if (category) url += `category=${category}&`; if (search) url += `search=${search}`; const res = await fetch(url); const posts = await res.json(); setPosts(posts); } fetchPosts(); }, [category, search]); ``` By updating the query parameters with user input, users can bookmark or share filtered views. --- ### 3. Related and Top Posts Recommendations To encourage deeper exploration, I added **Related Posts** based on shared categories, and **Top Posts** based on popularity metrics. Here’s a conceptual example of filtering related posts: ```ts function getRelatedPosts(currentPost, allPosts) { return allPosts.filter(post => post.category === currentPost.category && post.id !== currentPost.id ).slice(0, 5); } ``` This simple logic creates a personalized content hub, improving time spent on site. --- ### 4. Responsive & Accessible UI with Tailwind CSS Using **Tailwind CSS**, I crafted a sleek dark theme that shines on both desktop and mobile. Accessibility was also a priority, so I used semantic HTML elements, ensured keyboard navigation was smooth, and maintained strong color contrast. Here’s a sample Tailwind snippet from the comment section styling: ```jsx

{name.charAt(0).toUpperCase()}

{name}

{timeAgo(created_at)}

{text}

``` --- ## Lessons Learned & Pro Tips * **Validate API data thoroughly**: I ran into issues where `tags` came as strings or arrays, so always defensively check your data types. * **User experience is in the details**: Loading spinners, error messages, and input validation go a long way in making your app feel polished. * **Incremental development wins**: Start with static pages and basic data fetching, then layer on interactivity like filtering, searching, and dynamic comments. --- ## What’s Next on My Roadmap? * **Rich Markdown support:** To allow code blocks, embedded videos, and more interactive blog posts. * **User Authentication:** For comment moderation and personalized experiences. * **Performance optimizations:** Like incremental static regeneration and smart caching strategies. --- **If you’re curious about building your own blog with React and Next.js, or want to dive deeper into any part of this journey, I’d love to chat! Drop a comment or reach out — sharing knowledge helps us all grow.** Thanks for reading! 🚀

Our Blog