Create a Dashboard with Next.js API Routes - Fetching Data with SWR

LR

Lee Robinson / February 24, 2020

3 min read––– views

In this series, you will learn how to create a dashboard using Next.js API routes and integrate with third-party APIs.

Unsplash Downloads

-

Overview#

In the first three parts of the series, we learned how to fetch data from a variety of APIs. Now, we can consume this data visually to build our dashboard.

SWR#

SWR is a React Hooks library for remote data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

This is important for our dashboard page because it can be left open and the data will remain fresh. If you re-focus or switch between tabs, SWR will automatically revalidate data.

To use SWR, we can import the hook and define which route to fetch.

import useSWR from 'swr';

const { data } = useSWR('/api/unsplash', fetcher);

fetcher is a small wrapper around fetch returning json.

export default async function (...args) {
  const res = await fetch(...args);

  return res.json();
}

data will contain the JSON response from our API route.

// /api/unsplash

{
  "downloads": 7995,
  "views": 1134429
}

Consuming the Data#

Now that you have access to the data from the route, you can build a UI to consume the data. I've chosen to create "cards" for each metric.

components/metrics/Unsplash.js
import React from 'react';
import useSWR from 'swr';
import format from 'comma-number';

import fetcher from '../../lib/fetcher';

import MetricCard from './card';

function Unsplash() {
  const { data } = useSWR('/api/unsplash', fetcher);

  const downloads = format(data?.downloads);
  const views = format(data?.views);
  const link = 'https://unsplash.com/@leerob';

  return (
    <>
      <MetricCard header="Unsplash Downloads" link={link} metric={downloads} />
      <MetricCard header="Unsplash Views" link={link} metric={views} />
    </>
  );
}

export default Unsplash;

Note: The MetricCard source code is here.

Example#

The two cards below talk to /api/unsplash and pull back stats about my Unsplash account.

Conclusion#

This concludes my series on creating a dashboard with Next.js API routes. If you missed the previous posts, they are linked below.

Create a Dashboard with Next.js API Routes

React 2025

Build and deploy a modern Jamstack application using the most popular open-source software.

jamstackfns

The best serverless functions for JAMstack applications. Deploy to Vercel or Netlify for your static site.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.