Introducing Portfolio + Blog Starter Kit using Hashnode GraphQL APIs, Nextjs 14 App Router, Tanstack Query

Overview of the Portfolio + Blog Starter Kit

Hashnode released their API some time ago, and I wanted to create something with it. Hashnode has a starter kit, but I wanted something that could serve as both my portfolio and a headless blog.
So here's my own take on a starter kit powered by Hashnode's public APIs, the latest Next.js 14 features, and Tanstack Query.

Understanding the Tech Stack

Hashnode GraphQL APIs

Hashnode has extensive GQL APIs which can accessed from https://gql.hashnode.com
Documentation is available at https://apidocs.hashnode.com/

They also have a starter-kit which can be used as base to build upon.

https://github.com/Hashnode/starter-kit

Nextjs 14 App Router

I used the Nextjs 14 App Router with server components throughout the project. This is different from Hashnode's starter kit, which uses the Nextjs 13 page router setup. This was my first project with the app router, and it was a fun learning experience.

Tanstack Query and Virtual

I can't emphasis enough how amazing the DX is when using Tanstack.
I have used Tanstack React Query for making GQL API calls and Tanstack Virtual for virtualised list (infinite pagination). Both works like a charm.

I have written about Tanstack Virtual here in my blog - Article Link

I have also setup codegen that can generate query hooks and then you can use directly inside pages.

Setting Up the Starter Kit

Cloning the repository

git clone https://github.com/iammarmirza/floaty-hashnode-headless.git

Installing dependencies

yarn

Setting up environment variables

Copy .env.example and create a new file .env with it. Add your publication host.

NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT=https://gql.hashnode.com/
NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=ammarmirza.hashnode.dev --> Change this to your Hashnode blog URL i.e. handle.hashnode.dev

Start local server

yarn dev

Page Speed

Pages are fast enough as you can see in pagespeed performance score.

Demo

You can checkout the deployed preview URls of some famous blogs on hashnode

1. My blog - Live link

   

2. Tapas Adhikary's Blog - Live link

   

3. Victoria Lo's Blog - Live link

   

4. Hashnode's Engineering Blog as Portolio (just to showcase dark mode)
   @sandeep

   

Dark mode is currently dependent on system settings. I'm thinking to add a toggle if this gets enough engagement. I personally don't need it.

GitHub Repo

Please checkout the GitHub Repo and star if you liked the project 😄

Customise Further and Feedback

Feel free to fork the repo and customize it as needed. You can also send a PR to contribute back to the project.
I'm open to suggestions and you can contact me on twitter/X.