params object in dynamic routes

[KaarleJ]

Hi,

I have a dynamic route that gets an id from the params object like in the nextjs docs:

export async function GET(
  req: NextRequest,
  { params }: { params: { recipeId: string } }
) {
  const { recipeId } = params;
  /*
   Do some fun stuff with the recipeId
  */
  return NextResponse.json({});
 }

I test this route with a test like this:

import { testApiHandler } from 'next-test-api-route-handler';
import * as appHandler from './route';

describe('GET /api/recipes/[recipeId]', () => {
  test('should return recipes', async () => {
    await testApiHandler({
      appHandler,
      params: { recipeId: '1' },
      async test({ fetch }) {
        /*
         assertions
        */
      },
    });
  });
});

There is a type error when passing appHandler as a param:

Type 'typeof import("c:/Users/kaarl/Documents/My_Projects/simplyfood/src/app/api/recipes/[recipeId]/route")' is not assignable to type 'AppRouteUserlandModule'.
  Type 'typeof import("c:/Users/kaarl/Documents/My_Projects/simplyfood/src/app/api/recipes/[recipeId]/route")' is not assignable to type 'AppRouteHandlers'.
    Types of property 'GET' are incompatible.
      Type '(req: NextRequest, { params }: { params: { recipeId: string; }; }) => Promise<NextResponse<{ error: string; }> | NextResponse<{ recipe: Recipe; liked: boolean; }>>' is not assignable to type 'AppRouteHandlerFn'.
        Types of parameters '__1' and 'ctx' are incompatible.
          Type 'AppRouteHandlerFnContext' is not assignable to type '{ params: { recipeId: string; }; }'.
            Types of property 'params' are incompatible.
              Type 'Record<string, string | string[]> | undefined' is not assignable to type '{ recipeId: string; }'.
                Type 'undefined' is not assignable to type '{ recipeId: string; }'.ts(2322)

The appHandler is expected to have params as of type Record<string, string, string[]>. I didn't find a way in the docs where I can change the type neatly in the test.

[Xunnamius]

Interesting, I'll take a look.

[Xunnamius]

Alright, this seems like a Next.js and TypeScript thing rather than an NTARH thing. The mismatch here is likely caused by AppRouteUserlandModule being an internal type that NTARH is exposing. I may just have to replace AppRouteUserlandModule with a custom generic type that extends it.

You're correct that this should be supported per the Next.js docs.

[Xunnamius]

This should be resolved with v4.0.4