Building a User List with Next.js and an External API
- Published on
- Jigar Patel--4 min read
Overview
- Introduction
- Prerequisites
- Step 1: Install Dependencies
- Step 2: Create a Component for Data Fetching
- Step 3: Create a Next.js Page
- Step 4: Start the Development Server
- Quick summary
- Source Code
- About the Author
- We're Hiring
- Related Blogs
Introduction
If you're new to Next.js and want to learn how to fetch and display data from an external API, you've come to the right place. In this tutorial, we'll create a simple web application that fetches and displays a list of random users using the "Random User Generator" API. By the end of this guide, you'll have a basic understanding of building dynamic applications with Next.js.
Prerequisites
Before we begin, ensure that you have the following set up on your machine:
-
Node.js and npm: Make sure you have Node.js and npm (Node Package Manager) installed. If not, download and install them from the official website.
-
Next.js: You should have Next.js installed on your machine. If not, you can create a new Next.js project by following the steps below:
npx create-next-app my-next-app
cd my-next-app
- Code Editor: Use a code editor of your choice. Popular options include Visual Studio Code, Sublime Text, and Atom.
Step 1: Install Dependencies
We'll start by installing a package called isomorphic-unfetch, which is a minimalistic fetch library that allows us to fetch data from APIs on both the client and server sides.
npm install isomorphic-unfetch
Step 2: Create a Component for Data Fetching
In this step, we'll create a new component to handle the data fetching. Let's call it UserList.js. Inside this component, we'll use React hooks to manage state and the useEffect hook to fetch data from the API.
// components/UserList.js
import React, { useState, useEffect } from 'react';
import fetch from 'isomorphic-unfetch';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
async function fetchUsers() {
try {
const response = await fetch('https://randomuser.me/api/?results=5');
const data = await response.json();
setUsers(data.results);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchUsers();
}, []);
return (
<div>
<h2>Random User List</h2>
<ul>
{users.map((user, index) => (
<li key={index}>
<img src={user.picture.thumbnail} alt="User Thumbnail" />
{user.name.first} {user.name.last}
</li>
))}
</ul>
</div>
);
};
export default UserList;
This component fetches user data from the "Random User Generator" API and displays it in a list.
Step 3: Create a Next.js Page
Now, let's create a Next.js page to include the UserList component. We'll call this page index.js.
// pages/index.js
import UserList from '../components/UserList';
const Home = () => {
return (
<div>
<h1>Fetching API Data in Next.js</h1>
<UserList />
</div>
);
};
export default Home;
Step 4: Start the Development Server
You're almost there! To see your application in action, start the Next.js development server:
npm run dev
Now, open your web browser and navigate to http://localhost:3000. You should see the "Fetching API Data in Next.js" heading and a list of five random users fetched from the API.
Output :
Quick summary
Congratulations! You've successfully created a Next.js application that fetches and displays data from an external API. This is just the beginning of what you can achieve with Next.js. You can explore more complex data fetching, integrate additional APIs, and style your application to make it more visually appealing.
Source Code
The complete source code for this tutorial is available on GitHub. You can find it Here.
About the Author
Jigar Patel is a React.js enthusiast and a software developer at JBCodeapp Company. Visit our JBCodeapp to learn more about our work in the React.js ecosystem.
We're Hiring
Are you passionate about React.js development? We're always on the lookout for talented developers to join our team. Check out our Careers Page for current job openings.