Step-by-Step: Build a GitHub Profile with Next.js 15 and React 19 to Get Recruited

A strong GitHub profile is often the first technical impression you make on recruiters. Instead of a static markdown README, build a dynamic, fast, and interactive profile with Next.js 15 and React 19 to stand out from other candidates.

Why Next.js 15 and React 19?

Next.js 15 brings faster builds, improved App Router performance, and seamless integration with React 19. React 19 introduces features like Server Components, Actions, and improved hydration, making your profile snappy and SEO-friendly — critical for recruiter visibility.

Prerequisites

• Node.js 20.18.0 or later
• Git installed locally
• GitHub account
• Code editor (VS Code recommended)
• Basic knowledge of React and Next.js

Step 1: Initialize Your Next.js 15 Project

Open your terminal and run the following command to create a new Next.js 15 project:

npx create-next-app@latest github-profile --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

Follow the prompts, select "Yes" for App Router, TypeScript, Tailwind CSS, and ESLint. Once installed, navigate to the project directory:

cd github-profile

Step 2: Verify React 19 Installation

Next.js 15 ships with React 19 by default. Check your package.json to confirm:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0"
  }
}

If versions are lower, run npm install react@latest react-dom@latest next@latest to upgrade.

Step 3: Plan Your Profile Structure

Map out the sections you want to include. A recruiter-friendly profile should have:

• Hero Section: Your name, current title, tagline, and profile picture
• About: Brief summary of your experience and career goals
• Skills: List of technologies you're proficient in
• Projects: Dynamic list of your top GitHub repositories
• Contributions: GitHub contribution heatmap
• Contact: Links to LinkedIn, email, and resume

Step 4: Build the Hero Section

Create a components/Hero.tsx file. Use React 19's Server Components (the default in Next.js App Router) for static content:

export default function Hero() {
  return (



        Jane Doe
        Full Stack Developer

          Building scalable web apps with React, Next.js, and Node.js. Open to new opportunities.



  );
}

Import the Hero component into app/page.tsx and add it to the main page.

Step 5: Add Dynamic Projects from GitHub API

Fetch your GitHub repositories dynamically using the GitHub REST API. Create a components/Projects.tsx file. Use Next.js 15's Server-Side Fetching to get data at build time:

async function getRepos() {
  const res = await fetch("https://api.github.com/users/yourusername/repos?sort=stars&per_page=6", {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  return res.json();
}

export default async function Projects() {
  const repos = await getRepos();
  return (

      Top Projects

        {repos.map((repo: any) => (



                {repo.name}


            {repo.description || "No description provided."}

              ⭐ {repo.stargazers_count}
              🍴 {repo.forks_count}
              {repo.language}


        ))}


  );
}

Replace yourusername with your actual GitHub username. The next.revalidate option ensures your projects stay up to date without frequent rebuilds.

Step 6: Add GitHub Contributions Heatmap

Use the react-github-contributions-calendar library to display your contribution history. Install it first:

npm install react-github-contributions-calendar

Create a components/Contributions.tsx file:

"use client"; // This component needs client-side interactivity

import GitHubCalendar from "react-github-contributions-calendar";

export default function Contributions() {
  return (


        Contribution History





  );
}

Again, replace yourusername with your GitHub handle. The "use client" directive is required for client-side components in Next.js App Router.

Step 7: Optimize for Recruiters and SEO

Next.js 15 makes SEO optimization easy. Update your app/layout.tsx to include meta tags:

export const metadata = {
  title: "Jane Doe | Full Stack Developer",
  description: "Full Stack Developer with experience in React, Next.js, and Node.js. Check out my projects and contributions on GitHub.",
  openGraph: {
    title: "Jane Doe | Full Stack Developer",
    description: "Full Stack Developer with experience in React, Next.js, and Node.js.",
    url: "https://yourprofile.com",
    siteName: "Jane Doe's GitHub Profile",
    images: [
      {
        url: "https://yourprofile.com/og-image.png",
        width: 1200,
        height: 630,
      },
    ],
  },
};

Also, ensure your profile is responsive (Tailwind CSS handles this by default) and loads quickly — Next.js 15's automatic code splitting and image optimization will help here.

Step 8: Deploy to Vercel

Vercel is the recommended hosting platform for Next.js projects. Push your code to a GitHub repository, then:

1. Go to Vercel and sign in with your GitHub account
2. Click "New Project" and import your github-profile repository
3. Keep the default settings and click "Deploy"

Your profile will be live in minutes with a vercel.app subdomain. You can add a custom domain later if desired.

Step 9: Final Touches

Add a link to your profile in your GitHub README, resume, and LinkedIn profile. Include a clear call-to-action, like "Open to new opportunities — contact me at [email]".

Conclusion

Building a dynamic GitHub profile with Next.js 15 and React 19 sets you apart from candidates with static READMEs. It showcases your technical skills in React, Next.js, API integration, and deployment — all things recruiters look for. Update your profile regularly with new projects and contributions to keep it fresh.

Ready to get started? Clone the starter repo, follow the steps above, and land your dream job!