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

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

Overview

From this series, we learn how to fetch data from a variety of APIs such as

• Photos - Unsplash (for high quality images) - To get total photo downloads and photo views
• Videos - YouTube Data API v3 - videos, playlists, channels and statistics. To get subscribers and views
• Total site views - Google Analytics API - Analytics configuration and report data. To get site views another way we will use is storing a count onto google Firebase database
• Site subscribers - Mailchimp / Buttondown - get updates on most recent posts will be going with Buttondown

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": 0,
  "views": 24
}

Consuming the Data

Now that you have access to the data API keys for each application from the specific API route, you can create UI components 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 = 'https://unsplash.com/@frosty21';

  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.

Future moves

The next things to do with Lee Robs blog will be to add the following:

• GraphQL - to compress REST API calls
• GraphQL-Generator - for creating Typescript types, resolvers and mutations automatically
• React-Query - something I haven't decided yet but may do because of graphql-generator usage
• Typescript - more into the Future but make static error checking easier at development time
• Framer Motion - to have simple animations on buttons and call to action pages