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
- Initialize Nextjs Project01:08
- Add Markdown Styles01:38
- Style The Home Page And Blog Layout01:48
- Post Detail Page04:51
- Generate Next And Prev Slugs02:57
- Generate Next And Prev Slugs Solution02:06
- Add Prev And Next Links To Post Detail Page02:31
- Rendering Strategies03:32
- Generate Static Params03:02
- Archives04:19
- Fix Post Order Bug02:53
- Home Page Cleanup02:03
- Add Syntax Highlighting To Code Blocks04:32
- Run Prism At Build Time07:39
- Tailwindcss Typography02:15
- Route Group And Layout02:26
- Fake Static Markdown Posts02:51
- Install Dependencies01:06
- Markdown Helper01:16
- Filesystem Helpers05:17
- Render Latest Post On Home Page02:13
- Add Post Type Interface02: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