說(shuō)實(shí)話(huà)，我之前根本不知道這個(gè)組件的存在，直到偶然看到了 Vercel 團(tuán)隊(duì)的一段 YouTube 視頻。視頻里展示了他們自家的 AI 服務(wù)——V0，在配合 Next.js 15 使用時(shí)甚至比 ChatGPT 和 Claude 都更好玩。更有趣的是，視頻中特別提到了一個(gè) Next.js 新增的組件 <Form>，一試之后發(fā)現(xiàn)真的非常實(shí)用！

今天，我們就一起來(lái)探索一下這個(gè)有趣的新組件。

什么是 Next.js 的 <Form> 組件？

Next.js 15 引入的 <Form> 組件擴(kuò)展了傳統(tǒng)的 HTML <form> 元素，提供了一些額外強(qiáng)大的特性：

• 客戶(hù)端導(dǎo)航：提交表單后頁(yè)面不會(huì)完全刷新，體驗(yàn)更順滑。
• 預(yù)加載（Prefetch）：自動(dòng)預(yù)加載共享的 UI 組件（如 layout.js 和 loading.js），進(jìn)一步提高導(dǎo)航速度。
• 漸進(jìn)式增強(qiáng)（Progressive enhancement）：顯著降低處理 URL 參數(shù)的復(fù)雜性。

這種特性對(duì)于經(jīng)常與 URL 查詢(xún)參數(shù)交互或者需要進(jìn)行服務(wù)端操作的應(yīng)用場(chǎng)景非常實(shí)用。

基本使用方法

下面是一個(gè)簡(jiǎn)單的搜索表單使用示例：

import Form from 'next/form';

export default function SearchPage() {
  return (
    <Form action="/search">
      <input name="query" placeholder="搜索關(guān)鍵詞"/>
      <button type="submit">搜索</button>
    </Form>
  );
}

當(dāng)用戶(hù)提交表單時(shí)，輸入的內(nèi)容會(huì)自動(dòng)拼接到 URL 中作為查詢(xún)參數(shù)，比如：/search?query=abc。并且，這一過(guò)程完全是客戶(hù)端導(dǎo)航完成的，不需要重新加載頁(yè)面，用戶(hù)體驗(yàn)更加流暢。

深入理解 <Form> 工作原理

<Form> 組件具體表現(xiàn)取決于 action 屬性的類(lèi)型：

1. action 為字符串

• 類(lèi)似于傳統(tǒng) HTML 表單的 GET 方法。
• 表單數(shù)據(jù)會(huì)轉(zhuǎn)為 URL 查詢(xún)參數(shù)。
• 自動(dòng)進(jìn)行 UI 組件預(yù)加載，提升導(dǎo)航性能。
• 使用客戶(hù)端導(dǎo)航，避免頁(yè)面刷新，保留狀態(tài)。

圖片

例如：

<Form actinotallow="/products">
  <input name="category" placeholder="類(lèi)別"/>
  <button type="submit">查詢(xún)</button>
</Form>

2. action 為函數(shù)（Server Action）

• 表單提交時(shí)會(huì)調(diào)用服務(wù)端操作（Server Action）。
• 適合用來(lái)創(chuàng)建、修改或刪除服務(wù)器上的資源。

圖片

import Form from 'next/form';
import { createUser } from '@/actions';

export default function CreateUserForm() {
  return (
    <Form action={createUser}>
      <input name="username" placeholder="用戶(hù)名"/>
      <button type="submit">創(chuàng)建用戶(hù)</button>
    </Form>
  );
}

進(jìn)階特性

預(yù)加載（Prefetch）

當(dāng)表單元素進(jìn)入視口時(shí)，Next.js 自動(dòng)預(yù)加載目標(biāo)頁(yè)面的共享 UI。這種機(jī)制能讓頁(yè)面跳轉(zhuǎn)更加快速平滑。

加載狀態(tài)（Loading State）

你還可以通過(guò) useFormStatus 鉤子，輕松實(shí)現(xiàn)表單提交時(shí)的加載反饋：

'use client';
import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
  const status = useFormStatus();
  return (
    <button type="submit">
      {status.pending ? '提交中...' : '提交'}
    </button>
  );
}

常見(jiàn)使用場(chǎng)景

搜索表單

一個(gè)典型的場(chǎng)景就是快速實(shí)現(xiàn)搜索功能：

import Form from 'next/form';

export default function Search() {
  return (
    <Form action="/results">
      <input name="keyword" placeholder="搜索關(guān)鍵字"/>
      <button type="submit">搜索</button>
    </Form>
  );
}

在結(jié)果頁(yè)中，可以通過(guò) props 訪問(wèn) URL 中的搜索參數(shù)：

export default async function SearchResults({ searchParams }) {
  const data = await fetchSearchResults(searchParams.keyword);
  return <div>{/* 渲染搜索結(jié)果 */}</div>;
}

服務(wù)端數(shù)據(jù)變更

配合服務(wù)端操作（Server Actions），比如創(chuàng)建新文章：

import Form from 'next/form';
import { createArticle } from '@/actions';

export default function CreateArticlePage() {
  return (
    <Form action={createArticle}>
      <input name="title" placeholder="標(biāo)題"/>
      <button type="submit">發(fā)布</button>
    </Form>
  );
}

對(duì)應(yīng)的服務(wù)端函數(shù)可以完成創(chuàng)建并跳轉(zhuǎn)頁(yè)面：

'use server';
import { redirect } from 'next/navigation';

export async function createArticle(formData) {
  const article = await saveArticleToDatabase(formData);
  redirect(`/articles/${article.id}`);
}

為什么你應(yīng)該試試 <Form>？

前端開(kāi)發(fā)日新月異，尤其是 Next.js，每個(gè)版本都在迅速迭代，我們開(kāi)發(fā)者更要不斷學(xué)習(xí)。而 Next.js 15 引入的 <Form> 組件顯然是個(gè)令人興奮的新特性：

• 減少了重復(fù)編寫(xiě)表單提交代碼的工作量。
• 提供了預(yù)加載、客戶(hù)端導(dǎo)航等高級(jí)功能。
• 特別適用于常見(jiàn)的搜索功能和服務(wù)端數(shù)據(jù)變更場(chǎng)景。

即使你熟悉 React 和 Next.js，也強(qiáng)烈推薦嘗試一下這個(gè)新組件。也許它會(huì)徹底改變你的開(kāi)發(fā)方式呢！