Code Story: Building a Personal Developer Brand with Hashnode 3.0 and Next.js 15 RSC

Your personal developer brand is more than a resume — it’s a living portfolio of your skills, values, and contributions to the tech community. For developers looking to stand out in a crowded job market, a cohesive brand that showcases your work, writing, and expertise is non-negotiable. Two tools have emerged as game-changers for this: Hashnode 3.0’s revamped publishing platform and Next.js 15’s React Server Components (RSC). This code story walks through how to combine them to build a high-performance, SEO-friendly personal brand hub.

Why Hashnode 3.0?

Hashnode 3.0 isn’t just a blogging platform — it’s a full-fledged content management system built for developers. Key updates for personal branding include:

• Custom domain support with zero configuration, so your brand lives at your own URL (e.g., blog.yourname.dev)
• Native integration with GitHub, allowing automatic syncing of markdown posts from your repo
• Enhanced newsletter tools to grow and engage your audience directly
• Improved SEO defaults, including automatic sitemap generation and meta tag customization
• Webhook support for triggering builds on your connected Next.js site when you publish new content

Why Next.js 15 RSC?

Next.js 15’s stable React Server Components (RSC) are a perfect match for personal brand sites. RSC lets you render components on the server, reducing client-side JavaScript and improving performance. For personal brands, this means:

• Blazing fast page loads, which improves user experience and SEO rankings
• Seamless integration with Hashnode’s API to fetch and display your latest posts dynamically
• Easy static site generation (SSG) for portfolio pages, with incremental static regeneration (ISR) to update content without full rebuilds
• Native TypeScript support, making it easy to type your Hashnode API responses and component props

Step 1: Set Up Your Hashnode 3.0 Workspace

Start by creating a free Hashnode account and claiming your custom domain. Enable the GitHub integration by connecting your repo — this lets you write posts in markdown locally, push to GitHub, and have them automatically publish to Hashnode. Next, generate a Hashnode API key from your dashboard settings; you’ll use this to fetch your posts in Next.js.

Step 2: Initialize Your Next.js 15 Project

Run the following command to create a new Next.js 15 project with RSC enabled by default:

npx create-next-app@latest your-brand-site --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

This sets up a TypeScript project with Tailwind CSS for styling, the App Router (required for RSC), and a clean src directory structure. Navigate to your project and install the Hashnode API client:

npm install hashnode-client

Step 3: Fetch Hashnode Posts with RSC

Create a lib/hashnode.ts file to handle API requests. Use RSC to fetch your posts at build time or on demand:

import { HashnodeClient } from 'hashnode-client';

const client = new HashnodeClient({ token: process.env.HASHNODE_API_KEY });

export async function getLatestPosts() {
  const { posts } = await client.posts.list({
    filter: { publicationId: process.env.HASHNODE_PUBLICATION_ID },
    first: 10,
  });
  return posts;
}

In your app/page.tsx (a server component by default in Next.js 15 App Router), call this function to render your latest posts:

import { getLatestPosts } from '@/lib/hashnode';
import PostCard from '@/components/PostCard';

export default async function Home() {
  const posts = await getLatestPosts();
  return (

      Latest Writing

        {posts.map((post) => (

        ))}


  );
}

Step 4: Build Reusable RSC Components

Create a components/PostCard.tsx server component to display individual post previews. Since it’s a server component, you can pass the post data directly without client-side fetching:

export default function PostCard({ post }: { post: any }) {
  return (



          {post.title}


      {post.brief}

        {new Date(post.publishedAt).toLocaleDateString()}


  );
}

Step 5: Add Portfolio and About Pages

Use Next.js 15’s ISR to build static portfolio and about pages that update when you edit your content. Create app/portfolio/page.tsx and app/about/page.tsx as server components, fetching data from your preferred sources (GitHub API for projects, Hashnode for bio content).

Step 6: Deploy and Automate

Deploy your Next.js site to Vercel (optimized for Next.js 15) with one click. Set up a Hashnode webhook to trigger a Vercel redeploy whenever you publish a new post, so your brand site always shows your latest content. Add environment variables for your Hashnode API key and publication ID in Vercel’s settings.

SEO and Branding Tips

• Use Next.js 15’s metadata API to set dynamic meta titles and descriptions for each page, pulling from your Hashnode post data
• Add JSON-LD structured data for your posts and portfolio items to improve search engine visibility
• Customize your Tailwind theme to match your brand colors and typography
• Add a newsletter signup form that syncs with Hashnode’s native newsletter tool

Conclusion

Combining Hashnode 3.0’s developer-first publishing tools with Next.js 15 RSC gives you a personal brand hub that’s fast, maintainable, and fully under your control. You get the ease of Hashnode’s CMS for writing, plus the performance and flexibility of Next.js for custom pages and components. Start building today — your future self (and potential employers) will thank you.