Full Stack Blog App With Next.js

Build A Markdown Powered Static Blog with NextJS, TailwindCSS, PrismJS, And Rehype

What you'll learn

  • How to build a static blog website using NextJS
  • How to use markdown as the data format for storing blog posts
  • Explore differences in dynamic and static rendering
  • Use NodeJS to read from filesystem
  • How to add syntax highlighting with PrismJS and Rehype
  • How to use TailwindCSS Typography

Course Content

1 sections • 22 lectures • 1.1 hours total length

  • Initialize Nextjs Project
    01:08
  • Add Markdown Styles
    01:38
  • Style The Home Page And Blog Layout
    01:48
  • Post Detail Page
    04:51
  • Generate Next And Prev Slugs
    02:57
  • Generate Next And Prev Slugs Solution
    02:06
  • Add Prev And Next Links To Post Detail Page
    02:31
  • Rendering Strategies
    03:32
  • Generate Static Params
    03:02
  • Archives
    04:19
  • Fix Post Order Bug
    02:53
  • Home Page Cleanup
    02:03
  • Add Syntax Highlighting To Code Blocks
    04:32
  • Run Prism At Build Time
    07:39
  • Tailwindcss Typography
    02:15
  • Route Group And Layout
    02:26
  • Fake Static Markdown Posts
    02:51
  • Install Dependencies
    01:06
  • Markdown Helper
    01:16
  • Filesystem Helpers
    05:17
  • Render Latest Post On Home Page
    02:13
  • Add Post Type Interface
    02:04

Requirements

  • Some JavaScript experience is recommended

Description

Welcome to our course on Full Stack Development with Next.js, where we'll guide you through the creation of a powerful static blog app with syntax highlighting. A blog stands as an invaluable asset in every developer's career, unquestionably a critical component in marketing oneself as a software developer.

This course is meticulously designed to immerse you in the world of static sites, focusing specifically on building a dynamic blog fueled by markdown. Throughout this crash course, we'll take you on a journey, demonstrating the initial construction of the site using dynamic rendering, and then seamlessly transitioning to static site generation for optimal performance.

While there are undoubtedly various resources available on building static sites with Next.js, we'll guide you through the exact process using a template that stands out. Visit the Next.js homepage and click on "Templates." Look for the blog template, a fantastic starting point with an excellent repository. However, it's essential to note that this template utilizes the old pages router. In our course, we've meticulously ported everything over to the new app router, making a few enhancements to better suit our preferences.

Join us as we unravel the intricacies of building a custom static blog website from scratch. Watch our demo video, and discover if you're ready to embark on this transformative learning journey. Thank you for considering our Full Stack Development with Next.js Blog App course!

Who this course is for

  • Beginner NextJS developers looking to build a static blog powered by markdown
book image

This course includes:

  • 1.1 hours on-demand video
  • Certificate of completion

Upgrade To A Pro Plan

30-Day Money Back Guarantee

Unlimited Access To All Content

Invite To Private Discord Channel

Lifetime Access Or Annual Plan Available

OR

Buy Course

30-Day Money Back Guarantee

Full Lifetime Access