Programming

List Strava Activities in a Next.js App

Prerequisites A basic understanding of Next.js and TypeScript An active Strava account Access to the Strava API (client ID, client secret, and refresh token) A GitHub repository for your Next.js project Step 1: Setting Up Strava API Service To simplify Strava API integration, we'll create a new service: Step 2: Fetching and Displaying Activities in a Component To display activities on the frontend, you’ll need to fetch the necessary data and pass it to your React component. In this step, we fetch the data using getStaticProps, which allows the page content and activities to be pre-rendered at build time. Eg. in pages/index.tsx, the data is fetched by calling fetchExtendedActivities, which retrieves activities data from Strava API. The fetched data is then returned as props, which are passed to the component. Here’s how you can implement this: Step 4: Configuring GitHub Cron Job To automate tasks like data fetching, deployments, or updates on a regular basis, you can use a GitHub cron job by configuring a scheduled workflow. This will allow you to trigger your workflow at specific times, such as once a day, at a specific hour, or on particular days of the week. # Trigger the workflow once a day (adjust the schedule as needed) schedule: - cron: "0 0 * * *" # run the workflow at midnight UTC every day After the job runs, you can monitor the results and logs from the Actions tab in your GitHub repository. If the cron job fails or produces unexpected results, the logs will help you troubleshoot and adjust the workflow accordingly. Adding an API Route (Optional) Since we're using Next.js with SSG mode to generate distribution artefacts for GitHub Pages, we'll call the fetchExtendedActivities method inside getStaticProps. However, if you want to serve data (activities) from Strava API dynamically to your frontend, consider adding an API route in your Next.js app: Conclusion You’ve now set up a Next.js app that pulls in Strava activities, built a backend service, and set up a GitHub cron job to keep things updated regularly. This setup is super flexible, so you can tweak and expand it however you need as your project grows. Refs. Github repo Strava API Image Credits Photo by Luke Chesser on Unsplash

Feb 8, 2025 - 17:00

Prerequisites

A basic understanding of Next.js and TypeScript
An active Strava account
Access to the Strava API (client ID, client secret, and refresh token)
A GitHub repository for your Next.js project

Step 1: Setting Up Strava API Service

To simplify Strava API integration, we'll create a new service:

Step 2: Fetching and Displaying Activities in a Component

To display activities on the frontend, you’ll need to fetch the necessary data and pass it to your React component. In this step, we fetch the data using getStaticProps, which allows the page content and activities to be pre-rendered at build time.

Eg. in pages/index.tsx, the data is fetched by calling fetchExtendedActivities, which retrieves activities data from Strava API. The fetched data is then returned as props, which are passed to the component.

Here’s how you can implement this:

Step 4: Configuring GitHub Cron Job

To automate tasks like data fetching, deployments, or updates on a regular basis, you can use a GitHub cron job by configuring a scheduled workflow. This will allow you to trigger your workflow at specific times, such as once a day, at a specific hour, or on particular days of the week.

# Trigger the workflow once a day (adjust the schedule as needed)
schedule:
  - cron: "0 0 * * *" # run the workflow at midnight UTC every day

After the job runs, you can monitor the results and logs from the Actions tab in your GitHub repository. If the cron job fails or produces unexpected results, the logs will help you troubleshoot and adjust the workflow accordingly.

Adding an API Route (Optional)

Since we're using Next.js with SSG mode to generate distribution artefacts for GitHub Pages, we'll call the fetchExtendedActivities method inside getStaticProps. However, if you want to serve data (activities) from Strava API dynamically to your frontend, consider adding an API route in your Next.js app:

Conclusion

You’ve now set up a Next.js app that pulls in Strava activities, built a backend service, and set up a GitHub cron job to keep things updated regularly. This setup is super flexible, so you can tweak and expand it however you need as your project grows.

Refs.

Image Credits
Photo by Luke Chesser on Unsplash