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.
SOCIAL SHARE CARD GENERATOR