Next JS Build Error

Next.js
1

I am going through the Next JS course and learning Routing and Navigation. While learning"unexpected errors" when I have to build my solution it shows below error and I am not able to find a solution for it.

next-app@0.1.0 build
next build

▲ Next.js 15.0.2

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types .Failed to compile.

app/products/[[…slug]]/page.tsx
Type error: Type ‘Props’ does not satisfy the constraint ‘PageProps’.
Types of property ‘params’ are incompatible.
Type ‘{ slug: string; }’ is missing the following properties from type ‘Promise’: then, catch, finally, [Symbol.toStringTag]

CODE IS AS BELOW
import React from ‘react’

interface Props {
params: { slug: string };
searchParams: { sortOrder: string }
}

const ProductPage = ({ params: { slug }, searchParams: { sortOrder } }: Props) => {
return (

ProductPage {slug} {sortOrder}

)
}

export default ProductPage

2

I’m having the same issue:

import React from "react";

interface Props {
  params: { slug: string[] };
  searchParams: { sortOrder: string };
}
const ProductPage = ({
  params: { slug },
  searchParams: { sortOrder },
}: Props) => {
  return (
    <div>
      ProductPage {slug} {sortOrder}
    </div>
  );
};

export default ProductPage;

Type error: Type 'Props' does not satisfy the constraint 'PageProps'. 
  Types of property 'params' are incompatible.
    Type '{ id: number; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
3

So I was able to fix it. It looks like an update to NextJS, something to do with params and searchParams becoming Async, see here.

You can run the below command from the root of your project directory, and it will attempt to fix the files automatically:
npx @next/codemod@canary next-async-request-api .

For me, it fixed all but one, and I just had to manually edit the Props interface. Your ProductPage should look like this when it’s fixed:

import React from "react";

interface Props {
  params: Promise<{ slug: string[] }>;
  searchParams: Promise<{ sortOrder: string }>;
}
const ProductPage = async (props: Props) => {
  const searchParams = await props.searchParams;

  const {
    sortOrder
  } = searchParams;

  const params = await props.params;

  const {
    slug
  } = params;

  return (
    <div>
      ProductPage {slug} {sortOrder}
    </div>
  );
};

export default ProductPage;
1 Like
4

That worked for me as well. Thanks for your response. Happy Coding…:slight_smile:

1 Like