Vercel Hobby plan timeout at 10 seconds

Question

I have a next.js/trpc project, and have deployed it on vercel and using hobby plan. I integrated openai api, and on deployed website it times out at 10 second saying

JUL 05 01:51:56.38

gymgenieai-3fvr7ujk5-gymgenies-projects.vercel.app
/api/trpc/openai.generateWorkout
JUL 05 01:51:19.96
GET
200
gymgenieai-3fvr7ujk5-gymgenies-projects.vercel.app
/api/trpc/openai.generateWorkout
[GET] [middleware: "src/middleware"] /api/trpc/openai.generateWorkout status=200
JUL 05 01:51:18.89
GET
---
gymgenieai-3fvr7ujk5-gymgenies-projects.vercel.app
/api/trpc/openai.generateWorkout
Task timed out after 10.01 seconds

I read that hobby plan times out at 10 seconds, but you can configure it up to 60 seconds by adding

either this to vercel.json

{
  "functions": {
    "app/api/**/*": {
      "maxDuration": 55
    }
  }
}

or this to the top line of the function

export const maxDuration = 55; // This function can run for a maximum of 5 seconds

This is my code snippet:

export const maxDuration = 55;
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "../trpc";

import OpenAI from "openai";
import { GoalSchema, ProfileSchema } from "prisma/generated/zod";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  project: process.env.OPENAI_PROJECT_ID,
  organization: process.env.OPENAI_ORG_ID,
  timeout: 60000,
});

export const openaiRouter = createTRPCRouter({
  generateWorkout: protectedProcedure
    .input(z.object({ profile: ProfileSchema, goal: GoalSchema }))
    .query(async ({ input }) => {
      const { profile, goal } = input;

      type responseType =
.....
....
...
..
.

I put it there like it says in the docs https://vercel.com/docs/functions/configuring-functions/duration

But it still give timeout at 10 seconds.

What am i doing wrong?

Here is also my folder structure:

src
  └── app
      ├── _components
      ├── (homepage)
      ├── (signed-in)
      ├── api
      │   ├── auth
      │   ├── email
      │   └── trpc
      ├── types
      └── layout.tsx
  ├── server
      ├── api
      │   ├── routers
      │   │   ├── chatgpt.ts
      │   │   └── ....
      │   ├── root.ts
      │   └── trpc.ts
      ├── db.ts
  ├── trpc
  ├── types
  └── utils

I see other people having problem, but still didnt find a solution!

Answer 1

I found the solution.

If you are using next.js app router and TRPC put

export const maxDuration = 55;
export const dynamic = "force-dynamic";

in the

app/api/trpc/[trpc]/route.ts

This worked for me