Improve type checking error message for invalid props (#43903)

Previously when you have wrong props for a page or layout:

<img width="639" alt="CleanShot 2022-12-09 at 20 27 25@2x" src="https://user-images.githubusercontent.com/3676859/206782176-a91ec178-a7b7-4e17-b990-a0fe90402ebf.png">

With this PR:

<img width="643" alt="CleanShot 2022-12-09 at 20 27 30@2x" src="https://user-images.githubusercontent.com/3676859/206782204-4623c830-86e9-4b95-abc9-b0819475a74b.png">

Next step is to generate prop types for named slots.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)