前言
在现代 Web 应用开发中，React 已经成为了最流行的前端库之一。为了能够快速入门 React，一个具有内置 SSR、文件系统路由、热重载等优势的开发框架究竟是多么有价值和必要！在本篇文章中，我们将详细介绍 Next.js ，这是一个开源的 React 框架。
环境准备
Next.js 具有很强的依赖关系，所以我们使用 npm 或者 yarn 安装它。要创建 Next.js 项目，可以使用以下命令：
npx create-next-app my-app cd my-app npm run dev
请注意，您必须安装 Node.js 版本 10.13 或更新版本。
生成新项目看起来还是非常容易的。
页面创建
接下来，我们来创建我们的第一个 Next.js 页面。在 Next.js 中，一个页面通常是一个单独的 React 组件，它可以放置在 pages 目录下。在此处编写的所有组件都将作为服务器渲染的入口点。创建首页的页面结构很简单。
-- -------------------- ---- -------
------ ----- ---- -------
----- -------- - -- -- -
------ -
-----
---------- -----------
----- ------- - ---------- ------
------
-
-
------ ------- --------这个例子简单地创建了一个“Hello, World！”页面，你肯定可以创建一个更为复杂的页面。
路由
要在 Next.js 中创建路由非常容易。在 Next.js 中，我们不需要使用路由器去管理我们的路由，因为 Next.js 为我们接管了这个工作。创建一个路由很简单：只需要在 pages 目录下创建一个以 URL 路径命名的新文件即可。例如，创建路径为 /about 的路由，只需要在 pages/ 目录下创建一个文件名为 about.js 的文件即可。下面是一个路由的例子：
-- -------------------- ---- -------
------ ----- ---- -------
----- ----------- - -- -- -
------ -
-----
-------------
-----------------------
------
-
-
------ ------- -----------这个例子中我们创建的是一个关于我们页面，创建一个联系我们页面也是同样的方式。注意：我们并没有使用 React Router 或其他库来管理路由。
动态路由
在一些情况下，网站的 URL 需要使用参数。例如，访问博客文章需要使用文章 ID 作为参数。在 Next.js 中，可使用方括号（[]）来创建动态路由。文件名使用 URL 路径的参数名称。
例如，创建动态路由 /post/1 的页面，只需要在 pages/ 目录下创建一个名为 post/[id].js 的文件即可。其中，id 是该文件中的参数。文件中还需要将该参数传递给组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- -------------
----- ---- - -- -- -
----- ------ - -----------
----- - -- - - ------------
------ -
-----
---------- ----- ----------
------- -- --------
------
-
-
------ ------- ----这段代码可以在 pages/post/[id].js 中使用。在这个例子中，我们使用了 next/router 来获取路由参数。
客户端路由
Next.js 还为实现客户端路由提供了自己的方案。它使用了一个名为 link 的组件，用户在单击链接时可以向客户端发送请求。此功能在应用程序中的分页和类似分页的“领域驱动”场景中非常有用。
-- -------------------- ---- -------
------ ---- ---- -----------
----- -------- - -- -- -
------ -
--
---------- -----------
------- -- --- -------------
-----
----- --------------
------------
-------
----- ----------------
--------------
-------
------
---
-
-在上面的例子中，我们将 Link 组件用作 HTML 元素的替代品。Link 组件用于为应用程序中的其他页面生成 URL，用于在单击链接时向客户端发送请求。
样式表和 CSS-in-JS
你可以使用 CSS-in-JS 库，如 styled-components、emotion 或者 Linaria，在 Next.js 应用程序中编写样式，也可以使用普通的 CSS。在 Next.js 中引入 CSS 可以使用 Global CSS 和组件级 CSS 文件。
要在 components 目录下添加一个具有 CSS 文件的新组件，可以使用以下目录结构：
components/ |--MyComponent/ |--my-component.js |--my-component.css
一个组件级的 CSS 的例子：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------------------
----- ----------- - -- -- -
------ -
---- -----------------------------
--- --------------------------------------
--------- ---------------------------------------- - ---------------------------------------------
------
-
-
------ ------- -----------一个全局样式的例子：
import "./global.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}在这个例子中，我们只要在页面的根组件中引入样式表，就可以全局应用我们的样式。这适用于需要在整个应用中使用的样式。
集成 Next.js 到现有应用
现有的 React 应用程序可以非常容易地与 Next.js 集成。在新的 Next.js 应用程序中，可以使用以下方法将应用程序与现有代码库合并。
- 使用 next.config.js 客户端和服务器配置
使用 next.config.js 可以让我们在 Next.js 应用程序中修改 webpack 配置，添加新的 Webpack 插件，或者覆盖默认配置。
- 迁移至 pages/
我们可以将原本分布在不同目录中的 .js 和 .tsx 文件全部移动到 pages/ 目录中。这些文件的文件名将成为预期的 URL，例如：
./pages/about.jsbecomes/about./pages/products/index.jsbecomes/products./pages/products/[productId].jsbecomes/products/[productId]
- 重用现有服务器负载均衡器配置
根据您的环境，您可以轻松地将现有负载均衡器与 Next.js 集成，以便您的现有应用共享路径。
- 迁移 API 路由。
因为客户端和服务器端的路由都可以支持动态参数， 把您现有的 API 端点转换为 Next.js API 路由，是个相对简单的过程。
结论
在本篇文章中，我们详细介绍了 Next.js，这是一个开源的 React 框架。我们学习了 Next.js 的基础，包括如何创建页面和路由、如何进行样式表和客户端路由。并且，我们重点介绍了如何将 Next.js 添加到现有的 React 应用程序中。这让您能够更好地利用已有的基础设施来优化自己的应用程序。通过本篇文章和相关示例代码，你应该可以轻松上手 Next.js 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f64317c5c563ced580ec5c