Video Description

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap Learn how to build a Next.js Blog Website with Nextjs 13. Building a Blog App is an excellent project to show how Next.js 13 can use Static Site Generation / SSG and Markdown files for performance and content. 💖 Support me on Patreon ➜ https://patreon.com/davegray ⭐ Become a full-stack web dev with Zero To Mastery Courses: - Complete Next.js Developer: https://bit.ly/CompNextJSDev - Advanced React: https://bit.ly/AdvReactDev - Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 📬 Course Updates ➜ https://courses.davegray.codes/ ❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh ☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray 👇 Follow Me On Social Media: Github: https://github.com/gitdagray Twitter: https://twitter.com/yesdavidgray LinkedIn: https://www.linkedin.com/in/davidagray/ 🔗 Source Code: https://github.com/gitdagray/next-js-course 🔗 Playlist for this Next.js Course: https://bit.ly/dg-nextjs Next.js Blog Website | How to Build a Blog App with Nextjs 13 (00:00) Intro (00:05) Welcome (00:27) What We're Building (01:39) Basic Project Setup (03:39) TailwindCSS Setup & Typography (08:17) Run in dev mode (10:05) Basic Navbar (14:10) Profile Image (18:26) Adding Social Icons to the Navbar (21:42) Providing default metadata (22:32) Adding Markdown files for Blog Posts (24:28) BlogPost type (25:13) Reading Markdown with gray-matter (29:23) Posts component (32:31) ListItem component Pt. 1 (33:42) Formatting dates (34:56) ListItem component Pt. 2 (37:28) Create a dynamic route (38:01) Dynamic Post Pt. 1 (40:45) Custom 404 page (41:04) Generate dynamic metadata (42:54) Generate HTML from Markdown (46:29) Dynamic Post Pt. 2 (48:37) Evaluating the Project Build (51:08) Improving the build with generateStaticParams (53:37) Features You Can Add 📚 Tutorial References: 🙏 Credit to Shu Uesugi for the previous version of this project (before Next.js 13) at: https://next-learn-starter.vercel.app/ 🔗 TailwindCSS with Next.js: https://tailwindcss.com/docs/guides/nextjs 🔗 TailwindCSS Typography: https://tailwindcss.com/docs/typography-plugin 🔗 gray-matter: https://www.npmjs.com/package/gray-matter 🔗 remark: https://www.npmjs.com/package/remark 🔗 remark-html: https://www.npmjs.com/package/remark-html 🔗 react-icons: https://www.npmjs.com/package/react-icons 🚀 More References & Tools: 🔗 Next.js Official Site: https://nextjs.org/ 🔗 Next.js 13 Beta Docs: https://beta.nextjs.org/docs 🔗 ES7 React Snippets Extension: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets Was this Next.js tutorial about Client Components and building a small project helpful? If so, please share. Let me know your thoughts in the comments. #nextjs #blog #website