NextJS 13：服务器组件中如何获取POST请求数据？

可行，但你当前的代码是Pages Router的写法（依赖getServerSideProps），在Next.js 13的App Router架构下需要调整实现方式，以下分两种提交方式说明：

一、GET 方式提交表单 #

表单以GET方式提交时，参数会附加在URL的query中，App Router的页面组件可以直接接收searchParams参数来获取这些值，无需额外的服务端函数：

import styles from './page.module.css'
import SearchResults from './components/SearchResults'

export default function Home({ searchParams }) {
    // 解构参数并设置默认值，避免undefined
    const { fuzzySearchText = '', actor = '', type = '', studio = '' } = searchParams

    return (
        <main className={styles.main}>
            <div className="search">
                    <h2>Search Database</h2>

                    <form action="/" method='GET'>
                    <input type="text" name='fuzzySearchText' placeholder='fuzzySearchText' defaultValue={fuzzySearchText}/>
                    <input type="text" name='actor' placeholder='actor' defaultValue={actor}/>
                    <input type="text" name='type' placeholder='type' defaultValue={type}/>
                    <input type="text" name='studio' placeholder='studio' defaultValue={studio}/>
                    <input type="submit" value='Search' />
                    </form>

                    <h4>Output</h4>
                    <div>fuzzy {fuzzySearchText}</div>
                    <div>act {actor}</div>
                    <div>type {type}</div>
                    <div>studi {studio}</div>

            </div>

            <SearchResults
                FuzzySearchText={fuzzySearchText}
                Actor={actor}
                Type={type}
                Studio={studio}
            />

        </main>
    )
}

二、POST 方式提交表单 #

App Router中推荐使用Server Actions（Next.js 13.4+已稳定）来处理POST表单提交，无需额外编写API路由，直接在页面中定义服务端函数处理数据：

'use server'
import styles from './page.module.css'
import SearchResults from './components/SearchResults'
import { useFormState } from 'react-dom'

// 服务端处理函数，接收表单数据
async function handleSearch(prevState, formData) {
    const fuzzySearchText = formData.get('fuzzySearchText') || ''
    const actor = formData.get('actor') || ''
    const type = formData.get('type') || ''
    const studio = formData.get('studio') || ''

    // 此处可添加数据库查询等业务逻辑
    return { fuzzySearchText, actor, type, studio }
}

export default function Home() {
    // useFormState跟踪表单提交后的状态，初始值为null
    const [searchResults, formAction] = useFormState(handleSearch, null)

    return (
        <main className={styles.main}>
            <div className="search">
                    <h2>Search Database</h2>

                    <form action={formAction}>
                    <input type="text" name='fuzzySearchText' placeholder='fuzzySearchText'/>
                    <input type="text" name='actor' placeholder='actor'/>
                    <input type="text" name='type' placeholder='type'/>
                    <input type="text" name='studio' placeholder='studio'/>
                    <input type="submit" value='Search' />
                    </form>

                    <h4>Output</h4>
                    {searchResults && (
                        <>
                            <div>fuzzy {searchResults.fuzzySearchText}</div>
                            <div>act {searchResults.actor}</div>
                            <div>type {searchResults.type}</div>
                            <div>studi {searchResults.studio}</div>
                        </>
                    )}

            </div>

            {searchResults && (
                <SearchResults
                    FuzzySearchText={searchResults.fuzzySearchText}
                    Actor={searchResults.actor}
                    Type={searchResults.type}
                    Studio={searchResults.studio}
                />
            )}

        </main>
    )
}

注意点 #

• Next.js 13 App Router不再支持getServerSideProps这类Pages Router的服务端渲染函数，页面默认是Server Component，可直接编写异步逻辑或通过Server Actions处理表单。
• 使用Server Actions时，必须在函数顶部标注'use server'，标识这是一个服务端执行的函数。

内容的提问来源于stack exchange，提问作者Chud37