随着 Web 应用程序的发展，客户端渲染已成为前端开发的主流模式。然而，对于一些需要 SEO、快速渲染和性能优化的应用程序而言，服务端渲染(SSR)是不可避免的。
在本文中，我们将介绍 Next.js，一个基于 React 的服务端渲染框架，以及如何从零开始构建一个服务端渲染应用程序。本文中的示例代码将演示如何使用 Next.js 构建一个简单的博客应用，展示了 Next.js 的主要特点和功能。
开始
在开始本文之前，请确保你已经了解了以下知识：
- React 基础
- Node.js 基础
- npm 或 yarn 的基础使用方法
如果你还不了解这些知识，请先学习下面的资源:
创建一个 Next.js 应用程序
首先，我们需要使用 Next.js 的 CLI 工具来创建一个基本的项目架构。
打开命令行界面，输入以下命令：
npm init next-app my-blog
或者
yarn create next-app my-blog
这会自动创建一个名为 my-blog 的项目，并将相关的依赖项安装到你的项目中。
目录结构
在创建项目之后，你的文件夹结构应该类似于：
-- -------------------- ---- -------
--------
------
--------
------
---------
----
--------
-------
------------
-------
-----------
---- pages 文件夹中存放页面文件。Next.js 会自动根据文件名将其转换为 URL，并使用服务端渲染。例如，
/pages/index.js将被渲染为应用程序的主页。 - public 文件夹中存放公共文件，例如图标和样式文件。
- api 文件夹中存放 API 路由文件。Next.js 会自动创建一个可响应 HTTP 请求的 API 端点。
_app.js和_document.js为 Next.js 中两个特殊文件，可以用来进行全局的样式和文档操作。
创建首页
我们从首页开始，创建 pages/index.js 文件：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
--
------
--------- ---- -----------
----- ---------- ------------------- --
-------
----------- -- -- ----------
---
-
-该代码首先导入了 Head 组件，以便我们设置页面的标题和图标。接着，它创建了一个简单的欢迎信息。
现在，我们可以启动本地服务器并访问应用程序。在命令行界面中，输入以下命令：
npm run dev
或者
yarn dev
这会启动一个本地服务器，并将应用程序运行在 http://localhost:3000 上。
访问该页面，你应该会看到：
创建帖子页面
接下来，我们需要创建一个页面，用于显示博客帖子。
在 pages/posts/[slug].js 中，我们将创建一个动态路由，根据 URL 上的 slug 参数显示相应的博客帖子内容：
-- -------------------- ---- -------
------ ---- ---- -----------
------ - --------- - ---- -------------
------ ------- -------- ------ -
----- ------ - -----------
----- - ---- - - ------------
----- ----- - ----- --------
------ -
--
------
-------------- - -- ---- -----------
-------
----------------
---
-
-该代码首先导入了 Head 组件和 useRouter 钩子，以便我们设置页面的标题和读取 URL 中的参数。
我们使用 useRouter 钩子获取路由器实例，并使用 router.query 读取参数。接着，我们使用参数来设置帖子的标题和内容。
现在，我们可以尝试访问一个帖子页面，例如：http://localhost:3000/posts/1，您应该会看到：
创建博客 API
现在，我们需要创建一个 API 端点，用于提供博客帖子数据。在 pages/api/posts.js 中，我们将创建一个简单的 HTTP API，返回一个帖子列表：
-- -------------------- ---- -------
------ ------- -------- ------------ ---- -
----- ----- - -
- --- -- ------ ----- --- -------- -------- --- ---- -- --
- --- -- ------ ----- --- -------- -------- --- ---- -- --
- --- -- ------ ----- --- -------- -------- --- ---- -- --
-
---------------------------
-该代码导出一个名为 handler 的函数，该函数接收 HTTP 请求和响应对象作为参数。我们创建了一个包含三个帖子的数组，并将其返回给 HTTP 客户端。
现在，我们可以访问博客 API 端点，并获取帖子列表。在命令行界面中，输入以下命令：
curl http://localhost:3000/api/posts
你应该会看到以下输出：
[
{ "id": 1, "title": "Post 1", "content": "Content for post 1" },
{ "id": 2, "title": "Post 2", "content": "Content for post 2" },
{ "id": 3, "title": "Post 3", "content": "Content for post 3" }
]获取博客帖子
现在，我们已经创建了一个帖子列表的 API 端点。我们需要在客户端代码中调用该端点，并使用 getStaticProps 函数获取数据。
在 pages/index.js 中，我们将使用 fetch 函数以异步方式获取博客帖子列表：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ---- ---- -----------
------ - --------- --------- - ---- -------
------ ------- -------- ------ -
----- ------- --------- - ------------
------------ -- -
----- --------- - ----- -- -- -
----- --- - ----- -------------------
----- ---- - ----- ----------
--------------
-
-----------
-- ---
------ -
--
------
--------- ---- -----------
----- ---------- ------------------- --
-------
----------- -- -- ----------
----
--------------- -- -
--- --------------
----- ---------------------------
-------------------
-------
-----
---
-----
---
-
-该代码首先导入 Head、Link、useState 和 useEffect 组件和钩子，以便我们设置页面的标题和处理状态。我们使用 fetch 函数异步获取博客帖子列表，并将其存储在状态变量中。
接着，我们将帖子列表映射为一个元素列表，并使用 Link 组件来创建指向每个帖子详细信息的链接。
现在，我们可以重新启动服务器并访问主页。您应该会看到我们的博客帖子列表：
获取帖子详细内容
现在，我们已经为博客帖子创建了详细页面。我们需要获取帖子的详细信息并在页面上呈现。
在 pages/posts/[slug].js 中，我们将使用 getStaticPaths 和 getStaticProps 函数从帖子 API 中获取详细信息：
-- -------------------- ---- -------
------ ---- ---- -----------
------ - --------- - ---- -------------
------ ------- -------- ------ ---- -- -
----- ------ - -----------
-- ------------------- -
------ ---------------------
-
----- ----- - ----- -----------
------ -
--
------
-------------- - -- ---- -----------
-------
----------------
-------------------------
---
-
-
------ ----- -------- ---------------- -
----- --- - ----- ------------------------------------------
----- ----- - ----- ----------
----- ----- - -------------- -- -- ------- - ----- ------------------ - ---
------ -
------
--------- ----
-
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- ---------------------------------------------------------
----- ---- - ----- ----------
------ -
------ -
----
-
-
-该代码首先导入 Head 和 useRouter 组件和钩子，以便我们设置页面的标题和读取 URL 中的参数。
我们使用 getStaticPaths 函数生成包含所有博客帖子的路径列表，并使用 getStaticProps 函数从 API 中获取相应的帖子详细信息。
在 getStaticPaths 函数中，我们使用 fetch 函数异步获取博客帖子列表，并使用 map 函数将其转换为带有 slug 参数的路径列表。
在 getStaticProps 函数中，我们使用 fetch 函数异步获取帖子详细信息，并将其作为 props 返回。这允许我们在页面中使用 props.post 访问帖子详细信息。
如果没有匹配的路径，我们将使用 fallback 选项在查找帖子详细信息时使用加载状态。
部署应用程序
现在，我们已经创建了一个完整的服务端渲染的博客应用程序。我们需要将其部署到云端服务器中，以便全球用户访问。在这里，我们可以使用 Vercel 提供的自动化云服务，实现快速部署、自动化急速构建和度量网站性能。
请按照以下步骤部署应用程序：
- 创建一个 Vercel 帐户。
- 将代码推送到 GitHub 或 GitLab。
- 打开 Vercel 控制台，导入你的代码仓库并选择项目。
- 检查执行脚本和环境变量，并添加必要的环境变量。
- 点击“部署”按钮，等待部署完成。
- 访问你的应用程序，并确保已成功部署。
现在，我们已经成功部署了应用程序，并可以在云端服务器中访问它。
结论
在本文中，我们介绍了 Next.js，一个基于 React 的服务端渲染框架，并使用一个简单的博客应用程序演示了它的用法。
我们了解了 Next.js 中的页面路由、API 端点、数据获取和部署等方面，并使用这些功能构建了一个完整的服务端渲染的应用程序。
Next.js 提供了一种快速、简单和可靠的方式来构建服务端渲染应用程序，它是 Web 应用程序开发的一种完美选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6aa0fc5c563ced58b10c5