next.js: Next13 build error `Expected "NameProps", got "PageProps"`

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 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.3-canary.0
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

My project looks like this and all components are server components

.
├── README.md
├── app
│   ├── head.tsx
│   ├── layout.tsx
│   ├── name
│   │   ├── [name]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   └── page.tsx
├── next.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

It works fine when yarn dev but when build the app yarn build got this error

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

Expected Behavior

The app builds with no issues

Link to reproduction

https://github.com/alimehasin/next13-build-issue-temp

To Reproduce

Run yarn && yarn build

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 15 (3 by maintainers)

Most upvoted comments

I am also hitting a similar issue with version 13.0.3-canary.1. My steps to reproduce are

npx create-next-app@latest --experimental-app

npm install next@canary

npm run build (this finishes successfully)

Add a /app/blog/[slug]/page.tsx file as defined in the docs.

npm run build (this fails)
Type error: Page "app/blog/[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 "{ params: { slug: string; }; searchParams: { id: string; }; }", got "PageProps".
Here is a repo to reproduce. Might also be similar to #41884

I have similar issues but for me, it appears that the type error only exist if searchParams is used.

daveteu on Nov 9, 2022

I had the same problem Finally, I found a solution.

PageProps required by Nextjs is params?: TParams, searchParams?: TSearchParams

in my way params: TPrams, seachPramas: TSearchParams

An error was occurring because you did not give the optional.

seung-juv on Nov 10, 2022

I am also hitting a similar issue with version 13.0.3-canary.1. My steps to reproduce are

npx create-next-app@latest --experimental-app
npm install next@canary
npm run build (this finishes successfully)
Add a /app/blog/[slug]/page.tsx file as defined in the docs.
npm run build (this fails)

Type error: Page "app/blog/[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 "{ params: { slug: string; }; searchParams: { id: string; }; }", got "PageProps".

Here is a repo to reproduce. Might also be similar to https://github.com/vercel/next.js/issues/41884

didomenicom on Nov 8, 2022