Next.js app router directory can't run build

[alka7ex]

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Tue May 30 15:44:17 UTC 2023
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.9
      eslint-config-next: 13.4.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/alka7ex/blog-typescript/blob/main/app/page.tsx

To Reproduce

when i try to hit npm run build i always get issues that there is something wrong with my app/page.tsx

Describe the Bug

i'm trying to build my own personal blog, using js is working perfectly but i want to use shadcn so i convert to use typescript, i fix everything in my code and following typescript guidance, there might be silly mistake, i'm still new. but when i npm run build, it keeps saying error :

the error result is :

Type error: Page "app/page.tsx" has an invalid "default" export:
  Type "Props" is not valid.

here is my code for app/page.tsx

import Featured from '@/components/Featured'
import BlogList from '@/components/BlogList'

export interface Props {
  data: PropsDatum[];
  meta: Meta;
  slug: string;
}

export interface PropsDatum {
  id: number;
  attributes: PurpleAttributes;
}

export interface PurpleAttributes {
  title: string;
  slug: string;
  content: string;
  featured: boolean;
  createdAt: string;
  updatedAt: string;
  altthumbnail: string;
  descriptions: null | string;
  thumbnail: Thumbnail;
}

export interface Thumbnail {
  data: ThumbnailDatum[];
}

export interface ThumbnailDatum {
  id: number;
  attributes: FluffyAttributes;
}

export interface FluffyAttributes {
  name: string;
  alternativeText: null | string;
  caption: null;
  width: number;
  height: number;
  formats: Formats;
  hash: string;
  ext: string;
  mime: string;
  size: number;
  url: string;
  previewUrl: null;
  provider: string;
  provider_metadata: null;
  createdAt: string;
  updatedAt: string;
}

export interface Formats {
  thumbnail: Small;
  small: Small;
}

export interface Small {
  name: string;
  hash: string;
  ext: string;
  mime: string;
  path: null;
  width: number;
  height: number;
  size: number;
  url: string;
}

export interface Meta {
  pagination: Pagination;
}

export interface Pagination {
  page: number;
  pageSize: number;
  pageCount: number;
  total: number;
}

const page = async ({ data,meta }: Props) => {
  return (
    <div className='flex flex-col w-auto mx-0 mt-5 space-y-5'>
      <Featured data={data} meta={meta}></Featured>
      <BlogList data={data} meta={meta}></BlogList>
    </div>
  )
};

export default page;

Expected Behavior

i can do npm run build and it works perfectly, only when i try to build it, it not working. right now i'm skipping type check from next.config.js

Which browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

VPS managed by myself, OVH

[derilkcc]

I'm having a similar problem. my props has an optional parameter, but it doesn't make it through the build. as such： type Props = { parmas?: string | null; } const Page = ({ parmas }: Props) => {...} export default Page I added over a layer of wraps and passed the build with no problem. as such: type SearchParams = { parmas?: string | null; } type Props = { searchParams: SearchParams } const Page = ({ searchParams: { parmas } }: Props) => {...} export default Page

[yoonjong-park]

it happend same thing to me

[cinatrin]

it happend same thing to me, when I add to the layout.tsx. But I cannot fix it by changing it to the Page.tsx since it need to call something from the server side.

[DuckThom]

I just had something similar during the upgrade to Next 15. For me it was caused by 2 things in separate files:

1. In the type for some layout props I had accidentally copied over the searchParams declaration from another file (layouts do not receive search params)
2. In one file, I forgot to type the params prop as a Promise (Next 15)