⌘ Permalink

Using the Trakt API with Next.js

Reading time5 minutes
Words Count801 words

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


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

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

  • Head over to and sign up for an account or sign in.
  • Go to 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.


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.

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,

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

I personally use an app called 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.


Using the API in combination with the 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.