Skip to main content

Fetching Data from External API and Pass it to a Component 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 : 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-app

This will create a new Next.js project with the name "my-app" in a new folder with that name.,

Step 2 : 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 axios

Step 3 : 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:

  ➤ Example : Card.js;

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 : 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.

Labels

Tags

Comments

Post a Comment

Popular Posts

How to remove the date and .html from every blogger post url

#Remove date and .html from blogger post url A Common search term which every blogger search is How to Remove Date From Blogger Post URL or how do I remove date from blogger permalink? Follow the steps below and then date and .html will be removed from the URL of your blogger post. Step 1 : Login to your Blogger blog and select Theme / Template. Step 2 : Click on Edit HTML and paste the below code just above the </head> tag let's see code :   ➤ Code : mycode.js; Copy code <script type='text/javascript' > //<![CDATA[ // BloggerJS v0.3.1 var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&"[0];function urlVal(){var e=window.location.pathname,t=e.length;return...
6 comments
Read more

Django static files not working when debug false || debug true

# Django static and media files not working when debug is false In this article you will learn how to fix problem of not loading static files and media in Django even the DEBUG is FALSE. This is the easiest and safest solution. # Problem: Django static and media files not working when debug is false  ➤ Code: settings.py DEBUG = False #True ALLOWED_HOSTS = [ '*' ] #Host name # Problem Fix: Let's see, How you can fix the problem of Django static and media files not working when DEBUB = False : 1.)First way: devserver in insecure mode If you still need to server static locally ( e.g. for testing without debug ) you can run devserver in insecure mode: python manage.py runserver --insecure --insecure: it means you can run serve...
12 comments
Read more

how to create enum in java

What is enum in Java? An enum is a special "data type" that used to create our own datatype like classes and It represents a group of constants (a variable that does not change). The enum is short for "enumerations", which means "specifically listed" and the Enum data also known as Enumerated Data Type. # Defining Java enum Instead of C/C++, in java programming language enum types are more powerful. Here, we can define an enum both inside and enum outside the class but not inside a Method "Rules" to defing enum in Java: To create an enum in Java, use the enum keyword (instead of class or interface) , and separate the constants with a comma (,) . The enum can be defined within or outside the class because it is similar to a class. The semicolon (;) at the end of the enum constants are optional Because enum are constants, the names of an enum type's fields are in uppercase letters. ...
Post a Comment
Read more