Fetching Data from External API and Pass it to a Component in Next.js
Fetching Data from an External API in Next.js
Fetching data from an external API is a common task in modern web development. In this article, we will be showing how to use Next.js to fetch data from an external API and pass it to a component.
Step 1: Create a Next.js Project
First, let's start by creating a new Next.js project. You can do this by running the following command in your terminal:
npx create-next-app my-appThis will create a new Next.js project with the name "my-app" in a new folder with that name.
Step 2: Install Axios
Next, we will install the axios library, which is a popular library for making HTTP requests. You can install it by running the following command in your terminal:
npm install axiosStep 3: Create the Card Component
Now, let's create a new component in our Next.js project. In this example, we will call it "Card". This component will be responsible for displaying the data that we fetch from the API. Here's the code for the "Card" component:
import React from 'react'
export default function Card({ data }) {
return (
<div>
<h1>Data List</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
)
}As you can see, the "Card" component receives the `data` prop and renders it in an unordered list. Each item in the list is identified by its `id` and its `name` is displayed.
Step 4: Fetch Data with getServerSideProps
Now, we need a way to fetch the data from the API and pass it to the "Card" component. Next.js provides a built-in function called getServerSideProps that allows us to fetch data on the server side before rendering the component. Here's the code for the getServerSideProps function:
import axios from 'axios'
const API_URL = 'https://your-api-url.com/data'
export async function getServerSideProps() {
const res = await axios.get(API_URL)
const data = await res.data
return {
props: {
data,
},
}
}- In this example, we are using the `axios` library to make the API call to the specified `API_URL` and the response data is passed as a prop to the "Home" component. You should replace 'https://your-api-url.com/data' with the actual URL of your API endpoint.
- It is a good practice to add error handling in case the API call fails, for example by using try-catch block or by using the .catch() method on the promise returned by axios.
- In this way, you can fetch data from external APIs and pass it to components in your Next.js application. With the help of Next.js and the 'getServerSideProps' function, you can easily fetch data on the server side and ensure that your components are rendered with the latest data.