React 是一个流行的前端框架，许多团队使用 Create React App 来快速搭建应用程序。但是，当应用程序需要更高级的功能，例如服务器渲染和静态生成，就可以考虑使用 Next.js。
在本文中，我们将分享如何将一个 Create React App 应用程序迁移到 Next.js，并介绍 Next.js 的一些功能。
搭建 Next.js 应用
首先，安装 Next.js：
--- ------- ---- ----- ---------
然后创建一个 pages 目录，并创建一个 index.js 文件。在此文件中添加如下代码：
------ ------- -------- ------ -
------ -
----------- ------------
-
-现在可以启动该页面：
--- ---- ---
在浏览器中访问 http://localhost:3000/，将会看到 “Hello, World!” 字符串。
这只是一个简单的例子。因为 Next.js 机制的不同，还有一些需要注意的地方。
将应用程序迁移到 Next.js
现在，我们将 Create React App 的应用程序迁移到 Next.js。
首先，我们需要将 src 目录下的所有文件挪到 pages 目录下。
其中，App.js 应该改名为 _app.js，index.js 应该改名为 index.js，并可以将它们放在 pages 目录下。
创建用于 Next.js 的 package.json 文件：
-
--------------- -
------- ----------
-------- ----------
------------ ---------
--
---------- -
------ ----- -----
-------- ----- -------
-------- ----- ------
-
-目前，应用程序可以在 Next.js 中工作，但仍然需要执行一些操作才能完全利用 Next.js 提供的功能。
利用 Next.js 的功能
Next.js 具有许多强大功能，例如服务器渲染和静态生成，这些都是 Create React App 所不具备的。
服务器渲染
对于需要进行服务器渲染的页面，可以在 pages 目录下的文件中添加 getServerSideProps 方法。
------ ----- ------------------ - ----- -- -- -
----- --- - ----- --------------------------------------
----- ---- - ----- -----------
------ -
------ -
-----
--
--
--
------ ------- -------- -------------------------- -
------ -
-----------------------
--
-当该页面被请求时，Next.js 将在服务器上调用 getServerSideProps 并向页面传递 { props: { data } }。在 ServerSideRendering 页面中，可以使用 props 对象来访问传递的数据。
静态生成
对于不需要进行服务器渲染和请求的页面，可以使用静态生成。
在 pages 目录下的文件中添加 getStaticProps 方法。该方法返回一个包含需要在构建时静态生成的所有数据的对象。
------ ----- -------------- - ----- -- -- -
----- --- - ----- --------------------------------------
----- ---- - ----- -----------
------ -
------ -
-----
--
--
--
------ ------- -------- ------------- -
------ -
-----------------------
--
-在该页面被请求时，将会使用预渲染数据的版本进行渲染。
结论
在这篇文章中，我们介绍了如何将 Create React App 应用程序迁移到 Next.js，并介绍了 Next.js 的一些功能，如服务器渲染和静态生成。我们希望这篇文章对你有所帮助，并提供了一些指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672198602e7021665e08217a