大家好
Next.js 15 引入了一个新的 Form 组件,使处理表单变得比以往更容易。让我们快速看看如何使用它!
如何使用表单组件
首先导入Form组件:
从“next/form”导入表单;
现在,让我们创建一个简单的搜索表单:
导出默认函数SearchForm() {
返回(
<Form action="/search">
<input name="查询" placeholder="搜索..." />
<button type="提交">Search</button>
</Form>
);
}
就是这样!提交后,此表单将导航至 /search?query=your-search-term。
为什么使用表单组件?
表单组件提供三个主要优点:
更快的导航:它使用客户端导航。
无需 JavaScript 即可工作:如果 JavaScript 失败,表单仍能正常工作。
更快的加载:它会预加载下一页,让您的应用感觉更快。
通过使用 Form 组件,您无需任何额外工作即可获得这些高级功能。这是使您的 Next.js 表单更强大且用户友好的简单方法