Next.js Blog Starter

An awesome blog system based on Next.js.

✨ Features

Visual Features

• Great landing page.
• Typing effect for landing page title.
• Great fluid of post card.
• Great tags cloud page: separate page for posts under each tag.
• Great GitHub information card.
• Social share buttons.
• Full-featured MDX support:
  • Optimized vertical rhythm for headings and paragraphs.
  • Custom almost all Markdown built-in components.
  • GFM syntax support.
  • Katex math support.
  • Admonition container support.
  • Emoji short code support.
  • Image preview card support.
  • Pretty code blocks support:
    • Syntax highlight using PrismJS.
    • macOS style code box.
    • Line number support.
    • Lines highlight support.
    • Custom code title support.
    • Quick code copy support.
  • Out of box support for live code editor.
  • Automatically generated sidebar navigation, table of contents, previous and next post navigation links.
• Nice animation for page transitions and dynamic routing.
• Motion almost everything.
• Disqus comments system.
• Customized 404 not found page.
• Dark mode support.
• ...and more.

Development Features

• Lightning fast HMR.
• Dynamic route generation for Markdown posts.
• Optimized build using Rust compiler.
• TypeScript static type checking.
• ESLint, StyleLint and Prettier style checking.
• Out of box support for tailwind.css.
• Fully customizable styles through tailwind.css.
• Mobile-first approach in development.
• Out of box support for Vercel deployment.
• Separate components for everything.
• Complete React components testing using Jest and Testing Library.
• E2E visual testing using Cypress for Chrome and Firefox.
• Optimization for SEO: meta heading, sitemap and robots.txt support.
• Progressive web app (PWA): offline support and webapp manifest support.
• ...and more.

📑 Post Template

Yaml Front + Markdown Body:

---
layout: post
title: 'React Redux Basic Notes'
subtitle: 'Daily I learned'
author: 'sabertaz'
date: 2022-02-03
tags:
  - Redux
  - React
  - JavaScript
  - Frontend Development
  - Web Development
---

# React Redux Basic Notes

## Introduction

<... more contents>

🚀 Quick start

Installation

git clone --depth=1 https://github.com/sabertazimi/blog
cd blog
pnpm install

Development

# http://localhost:3000
pnpm start

Open the source code and start editing!

Your site is now running at http://localhost:3000!

🌠 Deployment

Build for / path:

# Deploy to Vercel.
pnpm run build

📂 Fold Structure

A quick look at the top-level files and directories you'll see in a Next.js project.

.
├── node_modules
├── app
├── components
├── config
├── contents
├── cypress
├── hooks
├── layouts
├── lib
├── mocks
├── public
├── styles
├── types
├── .gitignore
├── .tokeignore
├── .prettierrc.json
├── .stylelintrc.json
├── .versionrc.json
├── codecov.yml
├── cypress.config.ts
├── eslint.config.mjs
├── jest.config.js
├── jest.setup.js
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── sitemap.config.js
├── tailwind.config.ts
├── tsconfig.json
├── LICENSE
└── README.md

1. /node_modules: This directory contains all of the modules of code.
2. app: Pages components (SSG) based on Next.js App Router.
3. components: React components building block.
4. config: Blog site configuration (color/metadata/etc.).
5. contents: Blog posts (.md/.mdx).
6. cypress: Cypress E2E testing files.
7. hooks: Hooks for shared logic.
8. layouts: Layouts components.
9. lib: Data fetching helper functions.
10. mocks: Mock API for 3rd-party libraries for Jest testing.
11. public: Static assets.
12. styles: CSS stylesheets files.
13. types: TypeScript shared type definition.
14. .gitignore: This file tells git which files it should not track.
15. .tokeignore: Code Lines configuration file.
16. .prettierrc.json: Prettier configuration file.
17. .stylelintrc.json: StyleLint configuration file.
18. .versionrc.json: Standard Version configuration file.
19. codecov.yml: Codecov CI configuration file.
20. cypress.config.ts: Cypress E2E testing configuration file.
21. eslint.config.mjs: ESLint Flat configuration file.
22. jest.config.js: Jest configuration file.
23. jest.setup.js: Jest basic setup script (after environment setup).
24. next-env.d.ts: Next.js internal type definition.
25. next.config.mjs: Next.js configuration file.
26. package.json: A manifest file for Node.js projects.
27. postcss.config.mjs: PostCSS configuration file.
28. sitemap.config.js: next-sitemap configuration file.
29. tailwind.config.ts: Tailwind.css configuration file.
30. tsconfig.json: TypeScript configuration file.
31. LICENSE: This Next.js starter is licensed under the MIT license.
32. README.md: A text file containing useful reference information.

🚧 Caveats

import and export statements cannot be used inside an MDX file. If you need to use components in your MDX files, they should be provided to /components/MDX/index.ts.

See reason here and explanation here.

🔖 Contact