Encountering a type error on a custom API route in Next.js 15 while deploying to Netlify or executing `npm run build` command

Everything runs smoothly on npm run dev.

But when I deploy to Netlify or run npm run build locally, an error pops up:

app/api/projects/[projectId]/activity/route.ts
Type error: Route "app/api/projects/[projectId]/activity/route.ts" has an invalid "GET" export:
  Type "{ params: Record<string, string>; }" is not a valid type for the function's second argument.

The content of

app/api/projects/[projectId]/activity/route.ts
consists of the following:

import { NextRequest, NextResponse } from 'next/server';
import { supabase } from '@/lib/supabase';

export async function GET(
  request: NextRequest,
  { params }: { params: Record<string, string> }
) {
  try {
    const projectId = params.projectId;

    const { data, error } = await supabase
      .from('activity_log')
      .select('*')
      .eq('project_id', projectId)
      .order('timestamp', { ascending: false });

    if (error) throw error;

    return NextResponse.json({ activities: data });
  } catch (error) {
    return NextResponse.json({ error: 'Failed to fetch activity log' }, { status: 500 });
  }
}

This is utilizing NextJS version 15. As a beginner, I am open to providing any additional environment or codebase details.

I have attempted various fixes and even rewrote the API routes from scratch, but I continue to encounter the same Type errors.

Answer №1

Dealing with the same issue, I managed to work around it by temporarily turning off linting for that specific line:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export async function GET(request: Request, context: { params: any }) {
    const { artistId } = context.params;
    // Continue coding...
}

Although not ideal, this approach does get the job done.

Answer №2

If you're tired of using

{ params }: { params: Record<string, string> }
, consider giving { params }: { params: string } a shot instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 date validation rule for dd/mm/yyyy format in forms with reactive functionality

this.seedFundForm = this.fb.group({ multipleSource: this.fb.array([]), amount:[data.amount, Validators.compose([Validators.required, Validators.pattern('[0-9]*'), Validators.maxLength(10)])], date:[data.date, Validators.compose([Valid ...

Guide to incorporating external JSON data into a Select dropdown in Angular 7

Issue : How to populate JSON values retrieved from a REST API into a Select statement? team.component.html <mat-select placeholder="Select Name" [(ngModel)]="name"> <mat-option *ngFor="let currentName of nameValuesArray" [value]='currentN ...

Which video format is best to enable transparent video on web applications for both desktop and mobile, ensuring compatibility with all browsers on these platforms?

My NextJS web application utilizes a transparent video, currently available in MOV and WEBP formats. Interestingly, WEBP works perfectly on Chrome (Desktop) while MOV is optimized for Safari (Desktop). However, I encounter difficulties when viewing the v ...

"Experience the seamless navigation features of React Navigation V6 in conjunction with

Hello there, I've been experimenting with react-navigation 6 in an attempt to show a modal with presentation: "modal" as instructed on the documentation. However, I'm facing an issue where the modal is not displaying correctly and appears like a ...

Prevent Cookies from being stored in the browser

I have been attempting various methods to save the cookies through the server, however, it has not been successful. When I try to store the cookie in the index.js file via routes, it works and the cookie gets stored in the browser. But when I attempt to ...

What sets index.js apart from page.js in next.js?

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts While reading through the next.js documentation, I came across an interesting point. The documentation mentions that index.js serves as the root of the directory. This mean ...

Bizarre problem arises with useQuery: Argument values are not being recognized

One of my components passes a string (userToFetch) as a parameter in a parameterized query. Here is the structure of the component: // pages/index.jsx import React from 'react'; import { useQuery } from '@apollo/react-hooks'; import g ...

Tips for integrating JavaScript libraries with TypeScript

I'm looking to add the 'react-keydown' module to my project, but I'm having trouble finding typings for it. Can someone guide me on how to integrate this module into my TypeScript project? ...

What are some alternatives for integrating React production build files apart from utilizing Express?

Is there a way to integrate React into my library using the HTTP module? I'm trying to figure out how to recursively send static files. Specifically, I want to include the build folder from the React production build, but I'm not sure how to go a ...

The Validation pipe does not validate an imported class with the class-validator annotation

My Nest controller has a validation pipe decorator for input data. import {GetCatDto} from 'my-shared-lib' @Controller('myController') export class MyController { constructor(private readonly policyManagerService: PolicyManagerServi ...

Tips for showcasing all values in a nested array

In my Vue application, I am dealing with a nested array where users can select one date and multiple times which are saved as one object. The challenge I am facing now is how to display the selected date as a header (which works fine) and then list all the ...

Developing a custom package containing personally crafted type definitions and importing them into the project

I'm in need of creating a private npm package specifically for custom type definitions (typedefs) that are hand-written d.ts files not generated by TypeScript. Since these are proprietary, they cannot be added to DefinitelyTyped. The folder structure ...

The ngOnInit lifecycle hook of AppComponent fails to execute upon refreshing the page

When I go to the /posts url (localhost:4200/posts), I noticed that refreshing the page doesn't trigger the ngOnInit() method of the AppComponent. ...

How can Next.js server actions be utilized for endpoints that are not triggered from the client side?

Next.js 13/14 introduced server actions, rendering some endpoint declarations in pages/api/ obsolete. My concern lies with the endpoints designed for callbacks, like in the authorization code flow where our oidc-provider redirects to a callback enpoint. A ...

"Troubleshooting the issue of Angular's select binding causing a disruption

The Angular version being used is 1.4.7. Within the model in question, there are two objects: 'systems', which is an array, and 'selectedSystem'. The desired outcome is for 'selectedSystem' to reference one of the objects wit ...

Picking up Angular component property values within a callback function from Google Charts

Trying to utilize the angular-google-charts library in Angular 13.2, I am working on creating a TreeMap with a customized tooltip feature. The GoogleChartComponent offers an options property called generateTooltip which requires a callback function. My goa ...

Creating Beautiful MDX Layouts with Chakra UI

Currently, I am attempting to customize markdown files using Chakra UI within a next.js application. To achieve this, I have crafted the subsequent MDXComponents.tsx file: import { chakra } from "@chakra-ui/react" const MDXComponents = { p: (p ...

What method is the easiest for incorporating vue.js typings into a preexisting TypeScript file?

I currently have a functional ASP.NET website where I'm utilizing Typescript and everything is running smoothly. If I decide to incorporate jQuery, all it takes is running npm install @types/jQuery, and suddenly I have access to jQuery in my .ts file ...

Using any random function as a property value in a TypeScript React Component

I am facing a challenge in my React component where I need to define a property that can accept any arbitrary function which returns a value, regardless of the number of arguments it takes. What matters most to me is the return value of the function. Here ...

Encountering an ECONNRESET error in Next.js when making a GET request to an API within the getInitialProps function

An error has been encountered in a next.js application when sending a GET request using Axios in the getInitialProps of the _app.js file. if (typeof window === "undefined") { // user = await checkAuth(ctx); // const token = ctx.req.head ...