Struggling with Next.js build error: searchParams type mismatch

Other Questions NPM
1

Hey folks,

I’m trying to set up a filter bar with SSR in my Next.js project, but I’m hitting a roadblock. When I run npm run build, I get a TypeScript error about the searchParams prop in my page component. It’s driving me nuts!

Here’s what the error looks like:

Type 'WorksPageProps' doesn't match 'PageProps'.
's earchParams' types don't line up.
'{ filter?: string | undefined; }' is missing stuff from 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

I’ve got a WorksPage component that takes searchParams as a prop. It’s supposed to filter some portfolio items based on a URL parameter. But something’s not clicking.

Anyone know what I’m doing wrong here? I’m pretty new to Next.js, so I might be missing something obvious. Thanks in advance for any pointers!

2

I encountered a similar issue recently. The problem likely stems from Next.js’s built-in types for searchParams. To resolve this, try updating your page component to use the correct type from Next.js:

import { SearchParamsContext } from ‘next/navigation’;

interface WorksPageProps {
searchParams: SearchParamsContext;
}

This should align your component’s prop types with what Next.js expects. Also, ensure you’re using the latest Next.js version, as older versions had some quirks with searchParams typing. If the issue persists, you might need to adjust how you’re handling the filter parameter in your component logic.

3

hey RunningRiver, sounds like a headache! have u tried explicitly typing searchParams? like this:

interface WorksPageProps {
searchParams: { filter?: string }
}

that might help TS understand what ur expecting. also, double-check ur Next.js version - some older ones had issues w/ searchParams typing. lmk if that helps!

4

I’ve dealt with this exact issue before, and it can be frustrating. The problem is likely related to how Next.js handles server-side props and client-side rendering. Here’s what worked for me:

Instead of directly typing searchParams, try using the GetServerSideProps type from Next.js:

import { GetServerSideProps } from ‘next’;

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
const filter = query.filter as string | undefined;
return { props: { filter } };
};

Then in your component:

interface WorksPageProps {
filter?: string;
}

const WorksPage: React.FC = ({ filter }) => {
// Your component logic here
};

This approach separates the server-side logic from the component props, which should resolve the type mismatch. It also gives you more control over how the filter is passed to your component. Hope this helps!