前言
随着 Web 应用程序不断发展，越来越多的用户开始追求更快、更靠谱的交互体验。很多人已经意识到，单纯依靠前端框架的 CSR（客户端渲染）模式已经不足以满足这种需求。因此，即使对于相对比较小的 Web 应用，SSR（服务器端渲染）方案也越来越受到欢迎。
Next.js 是一个轻量级的 React 服务器渲染应用框架。它集成了最新的 Web 技术，如 React、Webpack、Babel、Express 等，并提供了一些实用的功能，如 HMR（热更新）、代码分割、静态文件服务等。使用 Next.js，开发者可以快速地构建高性能、可维护的 Web 应用程序。
框架介绍
安装与运行
使用 Next.js 开发 Web 应用程序，需要首先安装相关依赖。安装命令如下：
npm install --save next react react-dom
安装完成后，在项目根目录中创建 pages 文件夹，并在其中添加一个名为 index.js 的文件。在 index.js 中，可以编写类似于以下的代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- - -- -- -
-----
-------- -- --- --------------
------
-
------ ------- --------然后，在 package.json 中添加以下 scripts：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}运行命令 npm run dev，即可启动 Next.js 应用程序，并在浏览器中访问 http://localhost:3000 查看效果。
路由
Next.js 的路由功能十分强大和灵活。在 pages 文件夹下添加任意的 .js 或 .tsx 文件，均可以通过路由来访问。
在 Next.js 应用程序中，可以使用以下方式定义路由：
-- -------------------- ---- -------
-- --------------
------ ----- ---- -------
----- -------- - -- -- -
-----
-------- -- --- --------------
------
-
------ ------- ---------- -------------------- ---- -------
-- --------------
------ ----- ---- -------
----- --------- - -- -- -
-----
--------- -------
----- --- - ----- --- --------- ---- -- -----------------
------
-
------ ------- ---------注意，文件名即为路由的名称。例如，上述代码中的 / 对应于 pages/index.js，/about 对应于 pages/about.js。
Link 组件
开发者可以使用 Link 组件来创建内部跳转链接。例如：
-- -------------------- ---- -------
-- --------------
------ ----- ---- -------
------ ---- ---- -----------
----- -------- - -- -- -
-----
-------- -- --- --------------
----- ---------------------- -------------
------
-
------ ------- --------动态路由
Next.js 还支持动态路由，可以通过 [param] 的形式设置动态路由参数。例如：
-- -------------------- ---- -------
-- --------------------
------ ----- ---- -------
------ - --------- - ---- -------------
----- ---- - -- -- -
----- ------ - -----------
----- - ---- - - ------------
------ -
-----
---------------
------- -- --- ------- -- --- -----------
------
-
-
------ ------- ----静态文件服务
在 Next.js 中，可以添加一个名为 public 的文件夹来存放静态文件，如图片、CSS、JavaScript 等。在页面中引用静态资源的方式与普通的 HTML 页面类似。例如：
-- -------------------- ---- -------
-- --------------
------ ----- ---- -------
----- -------- - -- -- -
-----
-------- -- --- --------------
---- --------------- ---------- --
------- --------------------------
------
-
------ ------- --------服务端渲染
使用 Next.js，可以轻松地开发服务端渲染的 Web 应用程序。只需将服务器脚本修改为以下内容即可：
-- -------------------- ---- -------
-- ---------
----- ------- - ------------------
----- ---- - ---------------
----- --- - -------------------- --- ------------
----- --- - ------ --- --
----- ------ - -----------------------
--------------------- -- -
----- ------ - ---------
--------------- ----- ---- -- -
------ ----------- ----
--
------------------- ----- -- -
-- ----- ----- ---
-------------- ----- -- -----------------------
--
--SSR 防止 Rehydrate 的问题
React 在hydrate之后会再做一遍render，那么和初始HTML是不一样的。为了避免这种情况，需要在前后端统一渲染页面，否则页面容易与预期不一致。
妨假设客户端请求的路由是 /foo。
-- -------------------- ---- -------
-------------------
------ ----- ---- --------
------ ------- -------- ----- -
------ -
-----
------------
---------- -- --- ---------
------
--
-在服务端路由中，需要将静态的 component 使用 renderToString 转成字符串，传递到客户端。
-- -------------------- ---- -------
--------------
------ ----- ---- --------
------ --- ---- --------------------
------ ------- -------- --------- -
------ -
-----
---- --
-------
------------------
-----------------------
--------------------------
------- ----------------
----- ------
-- ----- ---- -- ---------------------
-- - -------- ------ ---- --------- -- ---- --- ---- ----- -----
-- -- ---- --- ----------------- --- --- - -------------------
---- -------
---
--
----------
------
--
-备注：除了将 component 转成字符串外，我们还需要将渲染该组件的 JSON 作为字符串写到
__NEXT_DATA__中，并把这个 script 标签放在组件的后面，这样在浏览器中运行这段 JS 代码的时候，__NEXT_DATA__中就可以提取到需要渲染的组件名。同时，由于服务端写死了__NEXT_DATA__中的 url，所以在客户端中 window.location.pathname 要与页面一致。
然后，客户端引入一个名为 _app.js 的文件，通过处理 window.__NEXT_DATA__，将组件转换成 react 组件并在 ReactDOM.hydrate() 中渲染。
-- -------------------- ---- -------
---------------
------ --- ---- -----------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------------------
------ ------- ----- ----- ------- --- -
-------- -
----- - ---------- --------- - - -----------
-- -------------------------- --- ------ -
----- ----- - -
-------------
--------- ---- ---
--
------ ---------- ---------- ---
-
------ ---------- -------------- ---
-
-
-- ------------------ -
----- - ------------- - - ---------------------
----- --------- - ------------------------------
-------------------------------------
----------------------- ------------------ --- -----------
-HMR
Next.js 集成了 HMR（Hot Module Replacement）功能，可以实现在不刷新页面的情况下实时更新应用程序。开发者只需在项目根目录中创建一个名为 next.config.js 的文件，然后添加以下内容即可启用 HMR 功能：
-- -------------------- ---- -------
-- --------------
-------------- - -
--------------------- -------- -- -
-- ----- --------- ------- --- -------
------------------- - -
----- ----- -- ----- --- ------- ----- ------
----------------- ---- -- ----- ------ ----------
--
------ -------
--
--------------------- -
-- -------
--
--总结
Next.js 是一个简单易用、功能强大的 React 服务器渲染应用框架。开发者可以在 Next.js 中使用深受欢迎的 React 库，并享受到 Next.js 提供的良好的性能、路由、静态文件服务、服务端渲染、HMR 等实用的功能。上面的介绍是 Next.js 的部分功能，当然 Next.js 的功能远不止如此。 经过实践，我们认为 Next.js 的使用广泛适用于企业级项目和个人项目，有很多优点值得你深度学习和掌握。希望这篇文章对你学习和使用 Next.js 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f850c8f6b2d6eab306d3ac