在前端开发中，开发者们通常使用 React.js 来构建 UI 界面，而 Next.js 则是一个非常有用的工具，它将 React.js 和服务端渲染结合起来，使得网站能够更好地被搜索引擎收录和优化。
本文将向您介绍如何使用 Next.js 从零开始创建一个完整的 Web 应用程序。在此过程中，我们将探讨以下主题：
- 创建一个基本的 Next.js 应用程序
- 配置页面路由
- 嵌入样式和第三方库
- 使用服务端渲染预渲染页面
- 从服务器获取数据并将其传递给前端组件
让我们开始吧！
准备工作
首先，您需要在本地安装 Node.js 和 npm。如果您还没有安装过它们，可以访问官方网站进行安装。
创建一个基本的应用
我们将使用 Next.js 官方提供的快速启动应用程序来创建一个基本的 Next.js 应用程序，步骤如下：
打开终端或控制台，导航到您想要创建应用程序的目录下。
cd /path/to/folder
运行以下命令，创建一个新的 Next.js 应用程序。
npx create-next-app my-app
此命令将在您的当前目录下创建一个名为
my-app的新应用程序。执行此命令可能需要一段时间，请耐心等待。完成后，您应该可以看到以下输出：-- -------------------- ---- ------- --- -------- ------- ------ -- ---------------------- ------ ---- ---------- --- --- --- ------- --------- --- --- --- ------ --- ----------- ------- --- --- ----- ------ --- --- --- ----------- --- --- ----- ---- --- ----- --- -- ---------- ----- -- ------- ---- --- ----- -- ------- -- ------ --- --- ---进入新的应用程序目录并启动开发服务器。
cd my-app npm run dev
此命令将启动一个本地开发服务器，并将您的应用程序运行在
http://localhost:3000上。可以在 Web 浏览器中访问此 URL，应该可以看到一个基本的 Next.js 应用程序的欢迎页面。（注意：如果您使用的是 Windows 系统，请使用
npx.cmd代替npx运行命令，并在运行npm run dev命令时设置您的环境变量为set NODE_ENV=development && next dev。）
好的，现在我们已经成功创建了一个基本的 Next.js 应用程序。下一步是更改默认的页面和添加自己的内容。
配置页面路由
在创建应用程序时，您可能已经注意到 pages 目录中有一个名为 index.js 的文件。这是 Next.js 中默认的页面。当访问主页时，将使用此页面进行渲染。
如果您点击文件夹，可以看到 Next.js 预设为相应地创建其他页面，可以直接在 pages 文件夹中添加其他页面。每个文件将创建一个新的路由，您可以直接通过 /{文件名} 访问该路由。
例如，需要创建一个名为“关于”的页面，因此可以创建一个名为 about.js 的新文件，如下所示：
-- -------------------- ---- -------
-------- ------- -
------ -
-----
--------------
------- -- --- ----- --------
------
-
-
------ ------- -----将该文件保存到 pages 目录中。然后，您可以通过访问 http://localhost:3000/about 来访问新的“关于”页面。
此外，如果某个页面应该基于某些数据或参数进行渲染，则可以使用动态路由。例如，在我们的应用程序中，我们可能需要显示单个产品的详细信息页面。我们可以使用动态路由来处理此情况。首先，创建名为 pages/products/[id].js 的文件，如下所示：
-- -------------------- ---- -------
-------- --------- -- -- -
------ -
-----
----------- --- ---------
------- -- --- ------- --------
------
-
-
------ ----- -------- ---------------- -
----- ----- - -
-------- ---- ------
-------- ---- -----
-
------ ------- --------- ------
-
------ ----- -------- ---------------- ------ -- -
------ - ------ - --- --------- - -
-
------ ------- -------请注意上面的代码中的两个重要函数：getStaticPaths 和 getStaticProps。这些函数与 Next.js 中的数据获取和预渲染相关联。我们稍后会对此再深入讨论。
现在，您可以通过访问 http://localhost:3000/products/1 或 http://localhost:3000/products/2 来访问具有此页面的产品详细信息页面。
嵌入样式和第三方库
一旦您开始创建多个页面，通常会希望向它们添加样式。Next.js 支持在页面级别上嵌入样式。
例如，下面的 index.js 页面显示如何嵌入页面级别样式：
-- -------------------- ---- -------
------ ------- -------- ------ -
------ -
--
-------- -- --- ---- ---------
------ ------
-- -
------ -----
-
----------
---
-
-此外，Next.js 还支持全局 CSS。在 pages 目录下创建一个名为 _app.js 的文件。在这里，您可以使用 import 导入全局 CSS 样式表并将其应用于整个应用程序。
下面是一个简单的示例 _app.js 文件，演示如何使用全局 CSS：
import 'styles/main.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}在上面的代码示例中，我将 main.css 文件保存在 styles 目录中，并在 _app.js 文件中引入它。在运行应用程序时，此样式表将应用到整个应用程序。
在使用下面的代码示例导入第三方库时，您可能会遇到一些问题：
import ReactMarkdown from 'react-markdown'
由于 Next.js 在服务端渲染时运行，而浏览器中不支持服务器端的 React.js 组件，因此您需要特别处理一下依赖的代码。您需要在您的项目根目录下新建一个 next.config.js 文件：
module.exports = {
webpack: (config, options) => {
config.node = {
fs: 'empty'
}
return config
}
}这将告诉 Next.js 不要抱怨使用了服务器端代码。有了这个安排，我们就可以使用 react-markdown 库了：
-- -------------------- ---- -------
------ ------------- ---- ----------------
----- ------- - -- -- -
---------------
- ---- -- - ------
--- ---- -- - ---------
----------------
-
------ ------- -------使用服务端渲染预渲染页面
Next.js 的另一个强项是预渲染功能。预渲染是指生成 HTML 静态文件，以便它们可以被直接访问，而无需在每个请求时重新生成。
预渲染可以提高应用程序的性能并降低对服务器的负载。当然，这并非每个应用程序都需要预渲染，但如果您有许多没有动态数据的内容页面，那么预渲染可能会是很好的优化方式。
您可以使用两种预渲染方案：静态生成和服务端渲染。静态生成是指在您的应用构建时，将所有页面预先呈现并将它们存储为 HTML 文件。这种方法非常适合不经常更改的内容页面，因为它们可以直接从 CDN、静态存储或缓存中提供，而无需访问服务器。
然而，静态生成并不适用于包含动态内容的页面。如果您需要在页面上显示用户数据或从某个服务上检索数据，那么使用服务端渲染可能是更好的解决方案。使用服务端渲染，可以在每次请求时对页面进行渲染。
Next.js 支持两种类型的服务端渲染：getServerSideProps 和 getStaticProps。前者对于从 API 检索数据或使用一些动态传递的查询参数的页面非常有用；后者则用于从外部数据源获取并呈现静态页面。
这里是一个示例：如何使用服务端渲染添加动态动态数据到页面：
-- -------------------- ---- -------
------ ------ ---- -------------------
------ ----- ---- --------------------
----- ---- - -- ------ ---- -- -- -
--------
----------------
-------------
---------
-
------ ----- -------- -------------------- ----- -- -
----- - -- - - -----
----- -------- - ----- ---------------------------------------------------------
----- ---------- - ----- ---------------
------ - ------ ---------- -
-
------ ------- ----首先，我们定义了一个名为 Post 的 React.js 组件。然后，我们创建一个名为 getServerSideProps 的异步函数，以便从外部数据源获取数据。在此示例中，我们使用 JSONPlaceholder API 获取数据，并将其传递给 Post 组件。数据将作为组件的属性传递，并在呈现组件时使用。
总结
至此，我们已经学习了如何从零开始创建一个使用 Next.js 的完整的 Web 应用程序。通过本文，您应该已经了解到如下主题：
- 如何使用 Next.js 创建一个新的应用程序
- 如何配置页面路由
- 如何嵌入样式和第三方库
- 如何使用服务端渲染预渲染页面
现在，您可以继续发掘 Next.js 更多功能，并将其用于您的下一个 Web 应用程序项目中。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496978348841e98943c9b94