在 Next.js 中如何构建服务器端渲染的表单
随着 Web 应用程序的发展，表单是我们必须处理的核心部分。在许多情况下，表单是用来创建和编辑数据实体的主要界面。虽然客户端渲染的表单通常非常流畅，但它们存在一些限制，比如安全性和可访问性问题。
为了解决这些问题，将表单渲染到服务器上可以大大减轻这些风险。Next.js 是一个支持服务器端渲染的 React 应用程序框架，因此它非常适合处理服务器渲染的表单。在本文中，我们将介绍如何在 Next.js 中构建服务器端渲染的表单。
- 创建表单
首先，我们需要创建一个表单。我们可以使用 HTML 和 React 来构建表单。下面是一个使用 React 组件来创建表单的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---- - -- -- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - --- -- -
-- -------------- --- ------- -
------------------------
- ---- -- -------------- --- -------- -
-------------------------
-
--
----- ------------ - --- -- -
-------------------
------------- ----- ----- ---
--
------ -
----- ------------------------
-----
------ ---------------------------
------
---------
-----------
-----------
------------
-----------------------
--
------
-----
------ -----------------------------
------
----------
------------
------------
-------------
-----------------------
--
------
------- -----------------------------
-------
--
--
------ ------- -----该表单具有“名称”和“电子邮件”字段，以及一个提交按钮。当提交按钮被点击时，handleSubmit 函数将被调用，之后会将表单数据打印到控制台中。
- 服务器端渲染
接下来，我们需要为表单创建一个服务器端渲染的版本。Next.js 提供了 getServerSideProps 函数来处理服务器端渲染，它允许我们在渲染时获取服务器端数据并将其传递到页面组件中。在我们的例子中，我们希望获取表单的初始值并将其传递给组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---- - -- ----- ----------- - --- ------ ------------ - -- -- -- -
----- ------ -------- - ----------------------
----- ------- --------- - -----------------------
----- ------------ - --- -- -
-- -------------- --- ------- -
------------------------
- ---- -- -------------- --- -------- -
-------------------------
-
--
----- ------------ - --- -- -
-------------------
------------- ----- ----- ---
--
------ -
----- ------------------------
-----
------ ---------------------------
------
---------
-----------
-----------
------------
-----------------------
--
------
-----
------ -----------------------------
------
----------
------------
------------
-------------
-----------------------
--
------
------- -----------------------------
-------
--
--
------ ----- ------------------ - ----- -- -- -
------ -
------ -
----- ----- -----
------ ----------------------
--
--
--
------ ------- -----我们将初始名称和电子邮件值作为组件的属性传递，然后使用它们来初始化我们的 useState 钩子。我们还使用 getServerSideProps 函数从服务器获取这些值，并将它们传递给表单组件作为其属性。
在这种情况下，我们返回了固定的值。在实际情况中，我们可以使用任何 Node.js API 来获取数据，例如从数据库获取值。
- 表单验证
表单验证是安全性和用户友好性的关键部分。在客户端渲染中，我们通常使用前端框架的验证库来验证表单。在服务器端渲染中，我们可以使用类似的库。在我们的例子中，我们将使用 Joi 来验证表单。
首先，我们需要安装 Joi:
npm install joi
然后，在我们的表单中使用 Joi 来验证表单数据：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --- ---- ------
----- ------ - ------------
----- ------------
-----------
-------
--------
------------
------ ------------
--------
------------
---
----- ---- - -- ----- ----------- - --- ------ ------------ - -- -- -- -
----- ------ -------- - ----------------------
----- ------- --------- - -----------------------
----- -------- ---------- - -------------
----- ------------ - --- -- -
-- -------------- --- ------- -
------------------------
- ---- -- -------------- --- -------- -
-------------------------
-
--
----- ------------ - --- -- -
-------------------
----- - ----- - - ----------------- ----- ----- ---
-- ------- -
------------------------------------ ----- -- -
-- ------------- -- ---- -
-------------------------------------
- ---- -
----------------- - ---------------
-
------ ----
-- -----
-------
-
--------------
------------- ----- ----- ---
--
------ -
----- ------------------------
-----
------ ---------------------------
------
---------
-----------
-----------
------------
-----------------------
--
------------ -- ----------------------- ------ -- -
---- -------------------------
---
------
-----
------ -----------------------------
------
----------
------------
------------
-------------
-----------------------
--
------------- -- ------------------------ ------ -- -
---- -------------------------
---
------
------- -----------------------------
-------
--
--
------ ----- ------------------ - ----- -- -- -
------ -
------ -
----- ----- -----
------ ----------------------
--
--
--
------ ------- -----在这个例子中，我们在顶部定义了一个 Joi 模式对象，该对象定义了如何验证名称和电子邮件值。在处理表单提交时，我们使用模式对象来验证表单数据。如果有错误，我们会将它们保存在状态中，并用于显示验证错误消息。
现在我们的表单在服务器端渲染，同时还可以进行有效的输入验证！
结论
在 Next.js 中构建服务器端渲染的表单是很简单的。我们可以使用 React 和任何要求的 Node.js API 来创建表单和获取数据，然后使用 Joi 进行表单验证。虽然这里只是演示了一些简单的功能，但你也可以根据具体需要对表单进行更高级的构建和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e7280e9a7045d0d69fb1d