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


Jonathan Wong / 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



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

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 = '';

  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.


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


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.


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

Spotify album cover