This content originally appeared on DEV Community and was authored by Mohammad Ezzeddin Pratama
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
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.