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