DEV Community

Cover image for Fetching GitHub Repository Information with Next.js and TypeScript
Mohammad Ezzeddin Pratama
Mohammad Ezzeddin Pratama

Posted on

Fetching GitHub Repository Information with Next.js and TypeScript

Image description
In this guide, we'll learn how to fetch and display GitHub repository information using Next.js and TypeScript. We'll use the GitHub API to get data and render it in a stylish manner using TailwindCSS.

Step 1: Set Up Your Next.js Project

If you don't have a Next.js project, create one with TypeScript:

npx create-next-app my-github-portfolio --typescript
cd my-github-portfolio
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Axios

We will use Axios to make HTTP requests to the GitHub API. Install it using npm:

npm install axios
Enter fullscreen mode Exit fullscreen mode

Step 3: Create GitHub API Service

Create a new file services/github.ts to handle API requests:

import axios from 'axios';

const GITHUB_API_URL = 'https://api.github.com';

export const getUserProfile = async (username: string) => {
  const response = await axios.get(`${GITHUB_API_URL}/users/${username}`);
  return response.data;
};

export const getUserRepositories = async (username: string) => {
  const response = await axios.get(`${GITHUB_API_URL}/users/${username}/repos`);
  return response.data;
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Fetch Data in Your Page Component

In your page component (e.g., pages/index.tsx), use getStaticProps to fetch data from the GitHub API:

import { GetStaticProps } from 'next';
import { getUserProfile, getUserRepositories } from '../services/github';

interface Repository {
  id: number;
  name: string;
  description: string;
  html_url: string;
}

interface ProfileProps {
  profile: {
    avatar_url: string;
    name: string;
    bio: string;
    html_url: string;
  };
  repositories: Repository[];
}

const Home = ({ profile, repositories }: ProfileProps) => {
  return (
    <div className="container mx-auto p-4">
      <div className="flex items-center space-x-4">
        <img src={profile.avatar_url} alt={profile.name} className="w-16 h-16 rounded-full" />
        <div>
          <h1 className="text-2xl font-bold">{profile.name}</h1>
          <p>{profile.bio}</p>
          <a href={profile.html_url} className="text-blue-500">GitHub Profile</a>
        </div>
      </div>
      <div className="mt-8">
        <h2 className="text-xl font-semibold">Repositories</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
          {repositories.map(repo => (
            <div key={repo.id} className="p-4 border rounded-lg">
              <h3 className="text-lg font-bold">
                <a href={repo.html_url} className="text-blue-500">{repo.name}</a>
              </h3>
              <p>{repo.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const username = 'your-github-username';
  const profile = await getUserProfile(username);
  const repositories = await getUserRepositories(username);

  return {
    props: {
      profile,
      repositories,
    },
  };
};

export default Home;
Enter fullscreen mode Exit fullscreen mode

Step 5: Style with TailwindCSS

Ensure you have TailwindCSS set up in your project. Add the following lines to your styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

You can now use TailwindCSS classes to style your components as demonstrated in the above code.

Step 6: Run Your Project

Start your development server to see your portfolio in action:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Conclusion

This tutorial showed how to fetch and display GitHub repository information in a Next.js application using TypeScript and TailwindCSS. This setup allows you to dynamically render your GitHub profile and repositories, making it a great addition to your developer portfolio.

Top comments (0)