Build a Next.js 13 blog website using Static Site Generation and Markdown files in this comprehensive tutorial. Learn to set up a project with TailwindCSS, create a navbar with social icons, implement dynamic routing, generate metadata, and convert Markdown to HTML. Explore advanced features like custom 404 pages and performance optimization techniques. Follow along to create a fully functional blog application while mastering key Next.js concepts and best practices for web development.
Overview
Syllabus
Intro
Welcome
What We're Building
Basic Project Setup
TailwindCSS Setup & Typography
Run in dev mode
Basic Navbar
Profile Image
Adding Social Icons to the Navbar
Providing default metadata
Adding Markdown files for Blog Posts
BlogPost type
Reading Markdown with gray-matter
Posts component
ListItem component Pt. 1
Formatting dates
ListItem component Pt. 2
Create a dynamic route
Dynamic Post Pt. 1
Custom 404 page
Generate dynamic metadata
Generate HTML from Markdown
Dynamic Post Pt. 2
Evaluating the Project Build
Improving the build with generateStaticParams
Features You Can Add
Taught by
Dave Gray
Related Courses
-
Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript
-
Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial
-
Fundamental Next.js API and Patterns
-
Next.js 13 E-Commerce Tutorial (App Router, TypeScript, Deployment, TailwindCSS, Prisma, DaisyUI)
-
Build a Digital Garden with Nuxt and Nuxt Content Module
-
Strapi & GatsbyJS Course - Portfolio Project
