nextjs <form> 组件

新的

组件通过预取、客户端导航和渐进式增强扩展了HTML元素。

它对于导航到新页面的表单很有用，例如指向结果页面的搜索表单。

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

组件附带：

预取：当表单在视图中时，布局和加载UI被预取，使导航快速。 客户端导航：提交时，共享布局和客户端状态将被保留。 渐进式增强：如果JavaScript尚未加载，表单仍然可以通过全屏导航工作。