介绍
Next.js 是一个基于 React 的轻量级框架，用于构建服务器端渲染的 React 应用程序。它提供了许多有用的功能，例如自动代码分割、静态文件服务、CSS 模块化等等。使用 Next.js，我们可以快速地构建出高度优化的 React 应用程序，并且无需手动配置 webpack。
在本文中，我们将介绍如何使用 Next.js 7.0 从零开始创建一个服务器端渲染的 React 应用程序，并且会详细地讲解 Next.js 的各种功能和用法。
环境搭建
在开始之前，我们需要先安装 Node.js 和 npm。可以从 Node.js 官网下载最新版本的 Node.js，并安装在本地。
安装完成后，我们可以在命令行界面中输入以下命令来检查是否安装成功：
node -v npm -v
如果输出了当前安装的 Node.js 和 npm 的版本号，则表示安装成功。
接下来，我们需要全局安装 Next.js：
npm install -g next
创建项目
现在我们可以创建一个新的 Next.js 项目了。在命令行界面中输入以下命令：
mkdir my-app cd my-app npm init -y npm install --save react react-dom next
这些命令将创建一个名为 my-app 的新目录，并在其中初始化一个新的 npm 项目。然后，我们安装了 React、React DOM 和 Next.js 依赖项。
添加页面
现在我们可以开始编写代码了。首先，我们需要创建一个名为 pages 的新目录，并在其中添加一个名为 index.js 的文件。这个文件将成为我们应用程序的主页。
在 index.js 中，我们将编写一个简单的 React 组件，并将其导出作为默认模块：
import React from 'react'
export default () => (
<div>
<h1>Hello, world!</h1>
<p>Welcome to my Next.js app.</p>
</div>
)这个组件将渲染一个标题和一段欢迎文本，用于展示我们的应用程序。
运行应用程序
现在我们已经编写了一个简单的页面，我们可以尝试运行我们的应用程序了。在命令行界面中输入以下命令：
next
这个命令将启动 Next.js 的开发服务器，并将我们的应用程序运行在默认的端口上（通常是 http://localhost:3000）。
在浏览器中访问该地址，我们应该能够看到我们的应用程序已经成功地运行起来了。
自定义路由
现在我们已经创建了一个简单的主页，我们可以尝试添加一些自定义路由。在 Next.js 中，我们可以通过在 pages 目录中创建新的文件来创建新的路由。
例如，我们可以创建一个名为 about.js 的新文件，该文件将成为我们应用程序的关于页面。在 about.js 中，我们可以编写一个新的 React 组件，并将其导出作为默认模块：
import React from 'react'
export default () => (
<div>
<h1>About Us</h1>
<p>We are a small team of developers.</p>
</div>
)现在，我们可以在浏览器中访问 http://localhost:3000/about，就可以看到我们的新页面了。
自定义样式
在 Next.js 中，我们可以使用 CSS 模块化来管理样式。这使得我们可以在不同的组件之间隔离样式，并避免全局样式污染。
首先，我们需要安装 isomorphic-style-loader 和 css-loader：
npm install --save isomorphic-style-loader css-loader
然后，我们可以在 pages 目录中创建一个名为 _document.js 的新文件，该文件将用于自定义文档渲染。在 _document.js 中，我们可以添加一个 <style> 标签，并使用 isomorphic-style-loader 和 css-loader 来加载我们的 CSS 文件：
-- -------------------- ---- -------
------ --------- - ----- ----- ---------- - ---- ---------------
------ - ---------------- - ---- -------------------
------ ------- ----- ---------- ------- -------- -
------ --------------- -- ---------- -- -
----- ----- - --- ------------------
----- ---- - -------------- -- ----- -- ------------------------ ---------- ----
----- --------- - -----------------------
------ - -------- --------- -
-
------ -- -
------ -
------
------
----------------------
-------
------
----- --
----------- --
-------
-------
-
-
-现在，我们可以在 pages 目录中创建一个名为 index.module.css 的新文件，该文件将用于为我们的主页添加样式。在 index.module.css 中，我们可以添加一些 CSS 样式：
-- -------------------- ---- ------- ---------- - ---------- ------ ------- - ----- -------- - ----- - -- - ---------- ----- -------------- ----- - - - ---------- ----- ------------ ---- -
最后，我们可以在 index.js 中导入我们的 CSS 文件，并将其应用于我们的组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------------------
------ ------- -- -- -
---- -----------------------------
---------- -----------
---------- -- -- ------- --------
------
-现在，我们的主页将应用我们的自定义样式。
部署应用程序
最后，我们需要将我们的应用程序部署到生产环境中。在 Next.js 中，我们可以使用 next build 命令来构建我们的生产应用程序，并使用 next start 命令来启动生产服务器。
首先，我们需要在 package.json 中添加两个新的脚本：
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}然后，我们可以运行以下命令来构建和启动我们的生产服务器：
npm run build npm run start
这将构建我们的应用程序，并将其运行在默认端口上（通常是 http://localhost:3000）。
现在，我们的应用程序已经成功地部署到生产环境中了。
结论
在本文中，我们介绍了如何使用 Next.js 7.0 从零开始创建一个服务器端渲染的 React 应用程序。我们详细地讲解了 Next.js 的各种功能和用法，并提供了示例代码来帮助读者更好地理解。
使用 Next.js，我们可以快速地构建出高度优化的 React 应用程序，并且无需手动配置 webpack。它提供了许多有用的功能，例如自动代码分割、静态文件服务、CSS 模块化等等。如果你正在寻找一种快速、简单、高效的构建 React 应用程序的方式，那么 Next.js 绝对是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743cefef3dd65303298c85a