Back to Browse

NextJS 13 Tutorial: Create a Static Blog from Markdown Files

60.9K views
Dec 12, 2022
53:37

Learn how to create a statically generated blog using NextJS 13, from setting up a NextJS project, styling it with TailwindCSS, all the way to deployment on Vercel. This tutorial covers new features available in NextJS 13, but is also suitable for beginners who are new to NextJS and want to learn how to build a blog from scratch. 🔗 Links 👉 Project Code: https://github.com/pixegami/nextjs-blog-tutorial 👉 Project Assets: https://files.pixegami.io/nextjs-blog-assets.zip 👉 To install Node and NPM, I recommend doing via NVM. Find the instructions on this page (or Google "Install NVM"): https://github.com/nvm-sh/nvm 🔗 Tech 👉 NextJS 13: https://nextjs.org/blog/next-13 👉 TailwindCSS: https://tailwindcss.com/ 👉 Vercel: https://vercel.com/ 📚 Chapters 00:00 Introduction 01:00 Prerequisites 02:55 Create a new NextJS project 06:53 Create the home page 09:28 Create a path for each post 14:12 Display post content 18:48 Use graymatter to parse metadata 24:22 Create static paths for each page 32:33 Use TailwindCSS to style the blog 45:15 Typography styling for markdown 50:34 Deploying to Vercel #pixegami #nextjs

Download

0 formats

No download links available.

NextJS 13 Tutorial: Create a Static Blog from Markdown Files | NatokHD