jiangdonghan / nextjs-blog

powered by graphcms

🔋 Next.js SSG Headless Graphql Blog with Portfolio

Next.js + Tailwind CSS + TypeScript + GraphQL + Apollo + GraphCMS

Features

Live Site

This repository comes with:

• ⚡️ Next.js 12
• ⚛️ React 17
• ✨ TypeScript
• 💨 Tailwind CSS 3 — Configured with CSS Variables to extend the primary color
• 💎 Hygraph (previously GraphCMS) — Headless Content Management System

Getting Started

1. Clone this Project

Use this repository as template

2. Install dependencies

It is encouraged to use yarn so the husky hooks can work properly.

yarn install

3. Run the development server

You can start the server using this command:

yarn dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

4. Change defaults

There are some things you need to change including title, urls, favicons, etc.

Don't forget to change the package name in package.json

5. Commit Message Convention

This project is using conventional commits, it is mandatory to use it to commit changes.

Development Roadmap

Code

• Use apollo client to fetch data
• Add type for GraphQL mutations
• Add type for GraphQL mutations
• Upgrade to Next.js 13
• Implement a loading UI

Blog

• Add pagination for blog posts
• Remove Image Banner from Blog Post
• Enable Search for Blog Posts

Portfolio

• Redesign Portfolio Page
• Refactor Portfolio Page to use GraphQL

Index

• Add some cool animations