https://github.com/emanuelefavero/nextjs-app-router-blog
A simple blog built with NextJS 13 App Router and Typescript to show its features
https://github.com/emanuelefavero/nextjs-app-router-blog
app-router blog nextjs nextjs13 server-components server-side-rendering static-site-generator typescript
Last synced: 18 days ago
JSON representation
A simple blog built with NextJS 13 App Router and Typescript to show its features
- Host: GitHub
- URL: https://github.com/emanuelefavero/nextjs-app-router-blog
- Owner: emanuelefavero
- Created: 2023-05-08T17:46:47.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-16T17:24:48.000Z (over 1 year ago)
- Last Synced: 2025-03-26T00:51:21.443Z (about 1 month ago)
- Topics: app-router, blog, nextjs, nextjs13, server-components, server-side-rendering, static-site-generator, typescript
- Language: TypeScript
- Homepage: https://nextjs-blog-typescript-rho.vercel.app/
- Size: 153 KB
- Stars: 24
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextJS App Router Blog
> Note: This is the Next.js 13 App Router version of the [NextJS Blog App](https://github.com/emanuelefavero/nextjs-blog)
A simple blog built with NextJS 13 App Router and Typescript to show its features
## Demo
[https://nextjs-blog-typescript-rho.vercel.app/](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](https://github.com/emanuelefavero/nextjs-typescript)
- [NextJS Typescript Docs](https://nextjs.org/docs/basic-features/typescript)
> 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**](https://nextjs.org/docs/app)
- [Typescript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Sass](https://sass-lang.com/)
- [postcss](https://postcss.org/)
- [autoprefixer](https://www.npmjs.com/package/autoprefixer)
- [date-fns](https://date-fns.org/)
- [gray-matter](https://www.npmjs.com/package/gray-matter)
- [remark](https://www.npmjs.com/package/remark)
---
[**Go To Top ⬆️**](#demo)