Building Next.js Fullstack Blog with TypeScript, Shadcn/ui, MDX, Prisma and Vercel Postgres.

? Welcome to my comprehensive MDX Blog Site Project! ? In this video, I’ll walk you through my feature-rich blog site that’s built to offer an exceptional experience for both bloggers and readers. Here’s what you can expect: ? Key Features: - MDX and Markdown Support: Enjoy the flexibility of writing your blog posts in MDX and Markdown, combining the best of both worlds with easy formatting and custom React components. - SEO Optimization: This site is fully optimized for search engines with a sitemap, robots.txt, and JSON-LD schema to ensure your content is easily discoverable. - RSS Feed: Stay connected with your audience through the integrated RSS feed, allowing readers to subscribe and get updates on new posts. - Dynamic OG Images: Enhance your social media presence with dynamic Open Graph images, automatically generated to make your content stand out. - Syntax Highlighting: Perfect for tech bloggers, our site includes syntax highlighting to display code snippets beautifully and clearly. - Tailwind CSS: Designed with Tailwind CSS, our site offers a modern and responsive design that looks great on all devices. - Shadcn/ui: Leverage the power of Shadcn/ui for a stunning and user-friendly interface. - Prisma: Our backend is powered by Prisma, providing a robust and efficient way to interact with our database. - Vercel Postgres: Deployed on Vercel with a Postgres database, our site ensures high performance and scalability. Join us as I dive into the details of how I’ve built this site, showcasing each feature and providing insights into my development process. Whether you’re a developer looking for inspiration or a blogger searching for the perfect platform, this video has something for you! Don’t forget to like, comment, and subscribe for more tutorials and project showcases! ✨ Timestamps: 00:00 - Introduction 01:24 - Project Demo 08:20 - Build Start 09:10 - Folder Structure 13:00 - MDX Contents 14:44 - Interact with MDX files 24:35 - Date Formating 31:22 - Components 41:45 - Main Navigation 42:30 - Shadcn/UI 53:42 - Icons 59:13 - Dark Mode 1:04:26 - Container Component 1:07:51 - Homepage 1:10:44 - CSS Sticky 1:11:55 - Top Categories 1:17:27 - Popular Posts 1:21:49 - Fixing Layout Issues 1:24:48 - Footer 1:39:46 - Refactoring with Constants 1:55:31 - Top Categories Refactor 1:57:00 - Category Dynamic Page 2:13:13 - Layout/Footer Refactor 2:19:46 - Updating Shadcn/ui component 2:22:51 - Blog Post Dynamic Page 2:32:28 - CustomMDX 2:55:26 - Latest Post Refactor 2:57:30 - Static Site Generation (SSG) 3:03:30 - Not Found 3:07:35 - Database with Prisma 3:10:23 - Deployment with Vercel 3:12:00 - Vercel Postgres 3:13:03 - Prisma Models 3:18:39 - View Count 3:23:35 - Route Handlers 3:37:16 - Vercel Deployment with Prisma 3:39:55 - Updating Domain on Vercel 3:43:04 - Query Data with SWR 3:54:51 - Skeleton 3:59:07 - Newsletter with Server Actions 4:04:24 - Validation with Zod 4:08:20 - UseFormState Hook 4:26:20 - Other Pages 4:33:27 - SEO with Metadata 5:13:07 - Conclusion #BlogSite #WebDevelopment #MDX #Markdown #SEO #RSS #TailwindCSS #Prisma #Vercel #Postgres #DynamicOGImages #SyntaxHighlighting #shadcnui #nextjs14 #nextjs13 #javascriptframework #javascript #database #fullstack #reactjs ? Resources: Next JS Docs: https://nextjs.org/docs Next-Mdx-Remote: https://www.npmjs.com/package/next-mdx-remote/v/0.5.1 Shadcn/UI: https://ui.shadcn.com/ Prisma: https://www.prisma.io/?via=codingjitsu SSG with Next.js: https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation Structured Data: https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data Finished Code: https://github.com/w3tsadev/next-blog Thanks for watching, and happy coding! ? Reach out to me: Twitter: https://twitter.com/w3tsadev ? Other Videos to Watch: Comprehensive Next.js Full Tutorial - https://www.youtube.com/playlist?list=PLI2MfgGPNO71XkjxnkLxLRDHMVBWkG5M3 Building Next.js Ecommerce Store with TypeScript, Tailwindcss, headlessui, and Shopify CMS: https://youtu.be/fJxzVFXGT_E Next.js Email Widget Refactor: Loading State & Custom Validation with Zod Explained: https://youtu.be/fSeNhzGD1PU