Next.js 15：我才知道居然还有这个组件！-51CTO.COM

说实话，我之前根本不知道这个组件的存在，直到偶然看到了 Vercel 团队的一段 YouTube 视频。视频里展示了他们自家的 AI 服务——V0，在配合 Next.js 15 使用时甚至比 ChatGPT 和 Claude 都更好玩。更有趣的是，视频中特别提到了一个 Next.js 新增的组件 <Form>，一试之后发现真的非常实用！

今天，我们就一起来探索一下这个有趣的新组件。

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

Next.js 15 引入的 <Form> 组件扩展了传统的 HTML <form> 元素，提供了一些额外强大的特性：

客户端导航：提交表单后页面不会完全刷新，体验更顺滑。
预加载（Prefetch）：自动预加载共享的 UI 组件（如 layout.js 和 loading.js），进一步提高导航速度。
渐进式增强（Progressive enhancement）：显著降低处理 URL 参数的复杂性。

这种特性对于经常与 URL 查询参数交互或者需要进行服务端操作的应用场景非常实用。

基本使用方法

下面是一个简单的搜索表单使用示例：

import Form from 'next/form';

export default function SearchPage() {
  return (
    <Form action="/search">
      <input name="query" placeholder="搜索关键词"/>
      <button type="submit">搜索</button>
    </Form>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

当用户提交表单时，输入的内容会自动拼接到 URL 中作为查询参数，比如：/search?query=abc。并且，这一过程完全是客户端导航完成的，不需要重新加载页面，用户体验更加流畅。

深入理解 <Form> 工作原理

<Form> 组件具体表现取决于 action 属性的类型：

1. action 为字符串

类似于传统 HTML 表单的 GET 方法。
表单数据会转为 URL 查询参数。
自动进行 UI 组件预加载，提升导航性能。
使用客户端导航，避免页面刷新，保留状态。

图片

例如：

<Form actinotallow="/products">
  <input name="category" placeholder="类别"/>
  <button type="submit">查询</button>
</Form>1.
2.
3.
4.

2. action 为函数（Server Action）

表单提交时会调用服务端操作（Server Action）。
适合用来创建、修改或删除服务器上的资源。

图片

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

export default function CreateUserForm() {
  return (
    <Form action={createUser}>
      <input name="username" placeholder="用户名"/>
      <button type="submit">创建用户</button>
    </Form>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

进阶特性

预加载（Prefetch）

当表单元素进入视口时，Next.js 自动预加载目标页面的共享 UI。这种机制能让页面跳转更加快速平滑。

加载状态（Loading State）

你还可以通过 useFormStatus 钩子，轻松实现表单提交时的加载反馈：

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

export default function SubmitButton() {
  const status = useFormStatus();
  return (
    <button type="submit">
      {status.pending ? '提交中...' : '提交'}
    </button>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

常见使用场景

搜索表单

一个典型的场景就是快速实现搜索功能：

import Form from 'next/form';

export default function Search() {
  return (
    <Form action="/results">
      <input name="keyword" placeholder="搜索关键字"/>
      <button type="submit">搜索</button>
    </Form>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

在结果页中，可以通过 props 访问 URL 中的搜索参数：

export default async function SearchResults({ searchParams }) {
  const data = await fetchSearchResults(searchParams.keyword);
  return <div>{/* 渲染搜索结果 */}</div>;
}1.
2.
3.
4.

服务端数据变更

配合服务端操作（Server Actions），比如创建新文章：

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

export default function CreateArticlePage() {
  return (
    <Form action={createArticle}>
      <input name="title" placeholder="标题"/>
      <button type="submit">发布</button>
    </Form>
  );
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

对应的服务端函数可以完成创建并跳转页面：

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

export async function createArticle(formData) {
  const article = await saveArticleToDatabase(formData);
  redirect(`/articles/${article.id}`);
}1.
2.
3.
4.
5.
6.
7.

为什么你应该试试 <Form>？

前端开发日新月异，尤其是 Next.js，每个版本都在迅速迭代，我们开发者更要不断学习。而 Next.js 15 引入的 <Form> 组件显然是个令人兴奋的新特性：

减少了重复编写表单提交代码的工作量。
提供了预加载、客户端导航等高级功能。
特别适用于常见的搜索功能和服务端数据变更场景。

即使你熟悉 React 和 Next.js，也强烈推荐尝试一下这个新组件。也许它会彻底改变你的开发方式呢！