Uploaded December 2022 | Updated September 2026, 10 hours ago

---

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: github.com/pixegami/nextjs-blog-tutorial
👉 Project Assets: 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"): github.com/nvm-sh/nvm

🔗 Tech
👉 NextJS 13: nextjs.org/blog/next-13
👉 TailwindCSS: tailwindcss.com
👉 Vercel: 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