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.

⭐ 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