Adding API Call to Next.js Portfolio
In this article, we will learn how to add an API call to a Next.js portfolio. Next.js is a popular JavaScript framework for building server-side rendered or static web applications. By adding an API call, you can fetch data from an external source and display it on your portfolio website.
Step 1: Set Up Your Next.js Project
If you haven’t already, make sure to set up your Next.js project using the following command in your terminal:
npx create-next-app
Step 2: Create a Component for API Call
Create a new component in your Next.js project, for example, ApiCall.js. In this component, you can use the built-in fetch method to make an API call to your desired endpoint. For example:
import React, { useState, useEffect } from 'react';
const ApiCall = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
);
}
export default ApiCall;
Step 3: Integrate the API Call
Now, you can integrate the ApiCall component into your portfolio page. For example:
import React from 'react';
import ApiCall from './ApiCall';
const Portfolio = () => {
return (
My Portfolio
);
}
export default Portfolio;
Step 4: Style the Fetched Data
You can now style and display the fetched data in your portfolio page using HTML and CSS. For example:
return (
<div>
<h1>My Portfolio</h1>
<ApiCall />
<div className="data">
{data.map(item => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
))}
</div>
</div>
);
Conclusion
By following these steps, you can easily add an API call to your Next.js portfolio. This allows you to fetch and display dynamic data from external sources, making your portfolio more interactive and engaging for visitors.
Need to zoom in for the next video