error 40104, 40105 when using ably with next js app router on vercel

I'm using ably and have created a route to generate a token on next.js server using the following code, based on the next example on ably's web site

// src/app/api/getAblyToken/route.ts

import { NextResponse } from "next/server";
import ably from "ably/promises";

export const fetchCache = "force-no-store";

export async function GET() {
  const token = await new ably.Rest({
    queryTime: true,
    key: process.env["ABLY_API_KEY"]!,
  }).auth.createTokenRequest({
    capability: {
      "*": ["subscribe", "publish", "presence"],
    },
  });
  console.log(token);
  return NextResponse.json(token);
}

It all works great on my machine but when I deploy to vercel I get error 40104 and 40105.

That basically say that the token was already used or that it's timestamp is invalid.

Two options:

1. Use POST instead of GET (Next caches results in GET) - that is the solution I ended up using

2. Disable caching for this route:

You need to add the following code to the route.ts

export const dynamic = 'force-dynamic'

This will tell next not to cache the results returned by the fetch function used by ably to get data from it's server.

This answer is based on the following article:

• https://faqs.ably.com/40104-timestamp-not-current
• https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#segment-level-caching
• https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

Here's the final code:

import { NextResponse } from "next/server";
import ably from "ably/promises";

export const fetchCache = "force-no-store";

export async function GET() {
  const token = await new ably.Rest({
    queryTime: true,
    key: process.env["ABLY_API_KEY"]!,
  }).auth.createTokenRequest({
    capability: {
      "*": ["subscribe", "publish", "presence"],
    },
  });
  console.log(token);
  return NextResponse.json(token);
}

export const dynamic = 'force-dynamic'