Expected "{ params: any; }", got "PageProps" on page next build dynamic segments

[fcarriedo]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:20:05 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T8101
Binaries:
  Node: 16.17.0
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

chrome v106

How are you deploying your application? (if relevant)

vercel

Describe the Bug

Error on compilation on Page's dynamic segments (NextJS 13):

Path/route: app/movies/[id]/page.tsx:

Contents of page.tsx:

export default function Page({ params }) {
  return (
    <>
      <div className="text-3xl">Movies and more {params.id}</div>
    </>
  );
}

Everything runs smoothly while on next dev --turbo, but as soon as I try next build, I get:

Type error: Page "app/movies/[id]/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "{ params: any; }", got "PageProps".

I'm having to add the ignoreBuildErrors: true flag in my next.config.js file for it to be able to build correctly when deploying it on vercel.

Expected Behavior

Build smoothly

Link to reproduction

N/A

To Reproduce

Create a dynamic segment with nextjs v13 as explained above and try to next build.

[balazsorban44]

Thanks, this has been fixed in #42019 already and will be available in the next release.

[v1s10n-4]

I still got the same issue using 13.0.1-canary.1.

• I use vercel
• Chrome 106.0.5249.119 (Official Build) (x86_64)

Build output

Type error: Page "app/games/[slug]/page.tsx" does not match the required types of a Next.js Page.
  Invalid configuration:
    The exported page component isn't correctly typed.
        Expected "GamesPageProps", got "PageProps".

app/games/[slug]/page.tsx:

import { Params } from "next/dist/shared/lib/router/utils/route-matcher";
import { FC } from "react";

export type GamesPageProps = {
  params: Params;
  searchParams: URLSearchParams;
};

const GamesPage: FC<GamesPageProps> = ({ params, searchParams }) => {
  return (
    <main>
      <h1 className="text-3xl font-bold underline">
        Games | {params.slug}
      </h1>
    </main>
  );
};

export default GamesPage;

Temp fix

Add ignoreBuildErrors: true in next.config.js as mentioned above.

[v1s10n-4]

Found a more reliable fix by following changes made in #42019 :

-import { Params } from "next/dist/shared/lib/router/utils/route-matcher";
 import { FC } from "react";

-export type GamesPageProps = {
-  params: Params;
-  searchParams: URLSearchParams;
-};
+export interface GamesPageProps {
+  params: any;
+  searchParams?: any;
+}

 const GamesPage: FC<GamesPageProps> = ({ params, searchParams }) => {
   return (

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.