Next.js Blog Website | How to Build a Blog App with Nextjs 13

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.

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

🔗 Source Code: https://github.com/gitdagray/next-js-course 

📚 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 

#nextjs