NextJS App Router Blog

Note: This is the Next.js 13 App Router version of the NextJS Blog App

A simple blog built with NextJS 13 App Router and Typescript to show its features

Demo

https://nextjs-blog-typescript-rho.vercel.app/

Screenshot

Run App Locally

• clone repo
• cd into repo
• run npm install
• run npm run dev

Typescript in NextJS

• NextJS Typescript Cheat Sheet
• NextJS Typescript Docs

Note: Since this app is built using Next.js 13 App Router, please refer to newer Typescript docs for Next.js 13

Create a new NextJS App with TypeScript and ESLint

• npx create-next-app APP-NAME --typescript --eslint

Features

• Use markdown files to create blog posts
• Parse markdown files using gray-matter and remark
• Display blog posts on home page and on their own page
• Sort blog posts by date
• Style blog posts using TailwindCSS and Sass

Technologies used in this project

• Next.js App Router Docs
• Typescript
• React
• TailwindCSS
• Sass
• postcss
• autoprefixer
• date-fns
• gray-matter
• remark

 

---

 

Go To Top   ⬆️