Using the Strava API with Next.js post image

Using the Strava API with Next.js

1. Create a Strava Application

Create a Strava application here (you'll need a strava account), then add the client ID and client secret to your .env.


2. Generate a refresh token

In order to make requests to the Strava API you need an access token, and to generate it you need a refresh token. You can find a refresh token on the previous settings page but we cannot use it long-term for our application as it will expire. In order to generate a refresh token that does not expire we need to authenticate with the Strava API:

  1. Go to[REPLACE_WITH_YOUR_CLIENT_ID]&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=activity:write and click "Authorize"
  2. You'll be redirected to a broken page, look at the url and copy the code part. This is the autorization code we will use in the next step.
  3. Make a cURL request in your terminal of choice to generate a refresh token that does not expire. It should contain the autorization code from the previous step as well as your client id & client secret:
curl -X POST \
	-F client_id=YOURCLIENTID \
	-F client_secret=YOURCLIENTSECRET \
	-F grant_type=authorization_code

The response will look something like this:

    "token_type": "Bearer",
    "expires_at": 1562908002,
    "expires_in": 21600,
    "refresh_token": "REFRESHTOKEN",
    "access_token": "ACCESSTOKEN",
    "athlete": {
        "id": 123456,
        "username": "MeowTheCat",
        "resource_state": 2,
        "firstname": "Meow",
        "lastname": "TheCat",
        "city": "",
        "state": "",
        "country": null,

Save the refresh_token to your .env


For debugging or more information, check Stravas official authentication docs:

3. Connect to Strava API

Create a new file lib/strava.ts that will handle all requests to the API. It will use the environment variables we added before in order to generate the access token required by the API.

In the example below I've added a getActivites() function that returns a list of recent public activites for the requested user.

const clientId = process.env.STRAVA_CLIENT_ID;
const clientSecret = process.env.STRAVA_CLIENT_SECRET;
const refreshToken = process.env.STRAVA_REFRESH_TOKEN;

const userId = 18364318; // 👈 Your strava user id, can be found by visiting your strava profile and checking the url
const TOKEN_ENDPOINT = "";
const ATHLETES_ENDPOINT = `${userId}`;

const getAccessToken = async () => {
  const body = JSON.stringify({
    client_id: clientId,
    client_secret: clientSecret,
    refresh_token: refreshToken,
    grant_type: "refresh_token",

  const response = await fetch(TOKEN_ENDPOINT, {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",

  return response.json();

export const getActivities = async () => {
  const { access_token: accessToken } = await getAccessToken();
  const response = await fetch(
  const json = await response.json();

  const publicActivities = json.filter(
    (activity: ActivityType) => activity.visibility === "everyone"

  return publicActivities;

The getAccessToken function was borrowed from Lee Robinsons excellent guide on using the Spotify API.

4. Usage in Next.js

Call the function from within your app. For example to render the result statically you can use getInitialProps (or a server component if using Next.js app dir).

Be sure to not fetch too often, as you'll get rate limited (currently max 100 requests every 15 minutes, 1000 daily). A good way is by using a higher value for the revalidate option.

import { getActivities } from "lib/strava";

export const getStaticProps = async () => {
  const activities = await getActivities();
  return {
    props: {
    revalidate: 3600,

Getting detailed activity data

To access more detailed data for each activity you need to fetch the full activities separately. It can be done via the following function:


export const getActivity = async (id: number) => {
  const { access_token: accessToken } = await getAccessToken();
  const response = await fetch(
  const json = await response.json();
  return json;

More features

To fetch more data or learn how to upload activites check out the official Strava API documentation


Get an email when i write new posts. Learn animation techniques, CSS, design systems and more