Using the Trakt API with Next.js

Trakt.tv API is a great way to integrate movie and TV show data into your website. This tutorial will show you how to use the API to display what movie or TV show you are currently watching on your NEXT.JS website.

# Prerequisites

Before you begin, you’ll need to make sure you have a few things set up:

• A NEXT.JS website
• A Trakt.tv account
• A Client ID from Trakt.tv/settings/applications

To create a Trakt application and get a Client ID, follow the steps bellow:

• Head over to Trakt.tv and sign up for an account or sign in.
• Go to Trakt.tv/settings/applications and click on the New Application.
• Fill in the details (use http://localhost:3000 for Redirect URI) and click on Create Application.
• You’ll be redirected to the application page where you’ll find your Client ID and Client Secret. For this tutorial, we’ll be using the Client ID to make API calls to Trakt.

# Making API Calls to Trakt

Now that we have our Client ID, we can make API calls to Trakt.

First of all, inside your .env.local file, add the Client ID as an environment variable.

TRAKT_CLIENT_ID=YOUR_CLIENT_ID

Second of all, we will make an API call to get shows and movies that we’ve watched. To do this, we’ll be using the getNowWatching function in the lib/trakt.ts file.

const TRAKT_CLIENT_ID = process.env.TRAKT_CLIENT_ID

const TRAKT_USERNAME = ENTER_YOUR_TRAKT_USERNAME_HERE
const WATCHING_ENDPOINT = `https://api.trakt.tv/users/${TRAKT_USERNAME}/watching`

export const getNowWatching = async () => {
  if (TRAKT_CLIENT_ID === null || TRAKT_CLIENT_ID === undefined) {
    throw new Error(`No Trakt API key found!`)
  }
  return fetch(WATCHING_ENDPOINT, {
    headers: {
      'content-type': 'application/json',
      'trakt-api-version': '2',
      'trakt-api-key': TRAKT_CLIENT_ID,
    },
    next: { revalidate: 1320 },
  })
}

# Create an API Route

Now that we have our API call, we can create an API route to fetch the data from Trakt.

import { NextResponse } from 'next/server'

import { getNowWatching } from '@/lib/trakt'
export const config = {
  runtime: 'edge',
}

export const GET = async () => {
  const response = await getNowWatching()

  if (response.status === 204 || response.status > 400) {
    return NextResponse.json({ isWatching: false })
  }

  const trakt = await response.json()

  return NextResponse.json(trakt)
}

This API route will return what you’re currently watching. If you’re not watching anything, it will return an empty object.

If you’re watching a TV show, this will be the response:

// https://localhost:300/api/now-watching
{
  "expires_at": "2022-12-26T13:46:41.000Z",
  "started_at": "2022-12-26T12:48:41.000Z",
  "action": "checkin",
  "type": "episode",
  "episode": {
    "season": 1,
    "number": 1,
    "title": "Pilot",
    "ids": {
      "trakt": 73482,
      "tvdb": 349232,
      "imdb": "tt0959621",
      "tmdb": 62085,
      "tvrage": 637041
    }
  },
  "show": {
    "title": "Breaking Bad",
    "year": 2008,
    "ids": {
      "trakt": 1388,
      "slug": "breaking-bad",
      "tvdb": 81189,
      "imdb": "tt0903747",
      "tmdb": 1396,
      "tvrage": 18164
    }
  }
}

If you’re watching a movie, this will be the response:

// https://localhost:300/api/now-watching
{
  "expires_at": "2022-12-26T14:14:19.000Z",
  "started_at": "2022-12-26T12:49:19.000Z",
  "action": "checkin",
  "type": "movie",
  "movie": {
    "title": "Cloverfield",
    "year": 2008,
    "ids": {
      "trakt": 3832,
      "slug": "cloverfield-2008",
      "imdb": "tt1060277",
      "tmdb": 7191
    }
  }
}

Congratulations! You’ve just created an API route that let’s you use the data we fetched from Trakt to display the movie or TV show you are currently watching.

# How to check-in to a show or a movie

Info: Trakt has released their official Android app which allows you to check-in to a show or a movie. You can download it from the Play Store

I personally use an app called cinetrakapp.com which is available for both Android and iOS. It’s a great app that allows you to check-in to the movie or TV show you’re watching. And it also helps you keep track of what you’ve watched and discover new movies and TV shows to watch.

# Conclusion

Using the Trakt.tv API in combination with the cinetrakapp.com app, you can easily display the movie or TV show the user is currently watching on your NEXT.JS website. With just a few lines of code, you can add this feature to your website and provide an enhanced user experience.