Next.js 14中app路由页面级调用getStaticProps无效问题求助

你遇到的核心问题是：Next.js 14的App Router完全不支持getStaticProps——这个API是Pages Router（旧的pages/目录体系）专属特性，放在app/目录下的代码里不会被执行，自然也不会有任何日志或报错。

具体修改方案 #

App Router默认组件都是Server Components，允许直接在组件内部编写异步数据获取逻辑，替代原Pages Router的getStaticProps功能。修改后的代码如下：

// app/(group)/rooms/page.tsx
import { RoomsPage } from '@/page/Rooms'
import { getCards } from '@/shared/api'
import { IRoomsCardAllData } from '@/shared/types'
import { Metadata } from 'next'

export const metadata: Metadata = {
    title: 'Guest House | Номера',
}

export default async function Rooms() {
    let roomsData: IRoomsCardAllData[] = []
    try {
        const res = await getCards()
        roomsData = res.data
    } catch (err) {
        console.error(err)
    }
    return <RoomsPage roomsData={roomsData} />
}

额外注意事项 #

• 确保页面文件命名正确：App Router要求页面必须放在page.tsx（或page.jsx）文件中，你的app/(group)/rooms目录下的文件必须符合这个命名规则，否则Next.js不会识别为页面路由。
• 静态生成逻辑：如果需要在构建时预渲染页面（原getStaticProps的SSG效果），只要你的数据获取是静态无依赖的，Next.js会自动在构建时执行异步逻辑并生成静态页面。如果是动态路径的静态生成，才需要配合generateStaticParams使用，当前固定路径场景无需额外配置。

内容的提问来源于stack exchange，提问作者Джамбулат Кагерманов