Fetching GitHub Repository Information with Next.js and TypeScript

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…


This content originally appeared on DEV Community and was authored by Mohammad Ezzeddin Pratama

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

Step 2: Install Axios

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

npm install axios

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;
};

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;

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;

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

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.


This content originally appeared on DEV Community and was authored by Mohammad Ezzeddin Pratama


Print Share Comment Cite Upload Translate Updates
APA

Mohammad Ezzeddin Pratama | Sciencx (2024-08-07T23:15:56+00:00) Fetching GitHub Repository Information with Next.js and TypeScript. Retrieved from https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/

MLA
" » Fetching GitHub Repository Information with Next.js and TypeScript." Mohammad Ezzeddin Pratama | Sciencx - Wednesday August 7, 2024, https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/
HARVARD
Mohammad Ezzeddin Pratama | Sciencx Wednesday August 7, 2024 » Fetching GitHub Repository Information with Next.js and TypeScript., viewed ,<https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/>
VANCOUVER
Mohammad Ezzeddin Pratama | Sciencx - » Fetching GitHub Repository Information with Next.js and TypeScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/
CHICAGO
" » Fetching GitHub Repository Information with Next.js and TypeScript." Mohammad Ezzeddin Pratama | Sciencx - Accessed . https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/
IEEE
" » Fetching GitHub Repository Information with Next.js and TypeScript." Mohammad Ezzeddin Pratama | Sciencx [Online]. Available: https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/. [Accessed: ]
rf:citation
» Fetching GitHub Repository Information with Next.js and TypeScript | Mohammad Ezzeddin Pratama | Sciencx | https://www.scien.cx/2024/08/07/fetching-github-repository-information-with-next-js-and-typescript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.