Full Stack Blog App With Next.js

Explore a demo of a full stack blog app built with Next.js app router, featuring markdown-powered posts, tailwind typography, client-side and server-side syntax highlighting, archives, and a code tour.

Initialize a Next.js project with npm create next app, name blog app, accept default options, cd into the directory, and run npm run dev to view it in your browser.

Clean up the next.js blog app by removing the gradient and light mode, streamlining the home page, and setting up a simpler starting point in VS Code.

Create a blog group with a layout.tsx that applies to its pages, move home page into the route group, and use system based routing so blog isn’t in the url.

Generate fake markdown posts to seed static content, using a lorem ipsum generator, paste the markdown into post files with front matter and dates, and create multiple posts.

Install essential dependencies to render markdown for the full stack blog app, including greymatter for front matter, luxon for date time handling, remark and remark html, and Linux types.

Create a lib folder with API.ts and implement a markdown to HTML helper using remark to render the latest post on the home page.

Read posts from the file system by listing the post directory, extracting slug, title, and date with matter and Luxon, then convert markdown to HTML for the home page.

Implement an async get latest post to render the home page post, linking the title to its slug, formatting the date, and rendering the post content as html from markdown.

Add a post type interface with slug, title, content, and date; export it and share types across the full stack; define API return types for all posts and latest post.

Create a markdown styles.module.css file, import it into your markdown div, and apply the tailwind-based classes to style your markdown content.

Style the blog layout and home page by adding margins, vertical spacing, a larger font, and a green accent, and switch the date label to date full.

Build a post detail page using a dynamic slug route, fetch by slug, render markdown with markdown styles via dangerously set inner HTML, and show the title and post date.

Learn to generate next and previous slugs for blog posts, adding next and previous post links to the post detail page and handling edge cases for first and last posts.

Implement a loop to assign next and previous post titles and slugs, using conditionals to avoid out-of-bounds errors for first and last posts, and feed these into the UI.

Render previous and next post links on the post detail page by conditionally displaying the previous post's title and slug and the next post link.

Compare static site generation and on-demand server rendering in a full stack blog app with Next.js. Learn how static pre-rendered post pages and markdown-to-html conversion speed delivery with cdn cache.

Implement generate static params to pre-render post detail pages as HTML by extracting slugs and removing the .md extension. Build and run to verify the site is statically rendered.

Create an archives page in a Next.js full-stack blog app that lists all posts by mapping through them fetched with get all posts, and links each title to its post.

Fixes the post order bug by moving the sorting logic from get latest post to get all posts and flipping the direction to use the last index for previous post.

Add syntax highlighting to code blocks in your Next.js blog app by installing prism js, configuring a prism loader component with React useEffect, and applying a prism acadia theme.

Learn to run Prism at build time by server-side syntax highlighting for a full stack blog app with Next.js, pre-rendering code blocks into HTML to improve performance and avoid flicker.

Install and configure Tailwind CSS typography to add default typography quickly. See bold text, darker tone, and underlined links with the plugin, then observe reversion when removed.