本文将介绍如何使用 Next.js 构建 React 应用，包括安装、创建应用、路由配置和样式等方面的内容。此外，还将通过一个实例，让读者更加深入了解 Next.js 的使用和优势。
安装
可以通过 npm 或 yarn 安装 Next.js，建议使用 yarn。
# 使用 npm 安装 npm install next react react-dom # 使用 yarn 安装 yarn add next react react-dom
创建应用
使用 create-next-app 命令创建一个新的 Next.js 应用。
# 创建应用 npx create-next-app my-app cd my-app # 启动应用 yarn dev
此时，访问 http://localhost:3000 即可看到一个默认的 Next.js 示例应用。
路由配置
Next.js 通过文件系统来进行路由配置。在 pages 目录下创建相应的文件即可。
例如，将页面路由为 /about ，则在 pages 目录下创建 about.js 文件即可。
// pages/about.js
function About() {
return <div>About Page</div>
}
export default About此时，访问 http://localhost:3000/about 页面即可看到 About Page 的内容。
数据获取
Next.js 提供了 getServerSideProps 和 getStaticProps 两个 API，用于在服务端获取数据，并将数据传递给页面组件。
-- -------------------- ---- ------- -- -------------- ------ ----- ---- ------- -------- ------- ---- -- - ------ --------------------------------- - ------ ----- -------- -------------------- - ----- - ---- - - ----- ---------------------------------------------- ------ - ------ - ---- - - - ------ ------- -----
此时，访问 http://localhost:3000/ 即可看到获取的数据。
样式
Next.js 提供了多种 CSS 方案，包括内置的 CSS 模块化、第三方库 styled-components 等。
CSS 模块
// components/Button.js
import styles from './Button.module.css'
function Button() {
return <button className={styles.button}>Click Me</button>
}
export default Button/* components/Button.module.css */
.button {
background-color: blue;
color: white;
}styled-components
-- -------------------- ---- ------- -- -------------------- ------ ------ ---- ------------------- ----- ------ - -------------- ----------------- ----- ------ ------ - ------ ------- ------
实例：博客应用
接下来，我们通过一个示例，学习使用 Next.js 构建博客应用。
项目结构
- pages
- index.js
- posts
- [id].js
- components
- Layout.js
- PostList.js
- lib
- posts.js
页面
在 pages 目录下，创建 index.js 文件。
-- -------------------- ---- -------
-- --------------
------ ------ ---- ----------------------
------ -------- ---- ------------------------
------ - ----------- - ---- --------------
-------- ------- ----- -- -
------ -
--------
--------- ------------- --
---------
-
-
------ ----- -------- ---------------- -
----- ----- - -------------
------ - ------ - ----- - -
-
------ ------- -----在 pages 目录下，创建 posts 目录，并在其中创建 [id].js 文件。
-- -------------------- ---- -------
-- -------------------
------ ------ ---- -------------------------
------ - ------------ ------------- - ---- -----------------
-------- ------ -------- -- -
------ -
--------
---------------------------
---- -------------------------- ------- ---------------- -- --
---------
-
-
------ ----- -------- ---------------- ------ -- -
----- -------- - ----------------------
------ - ------ - -------- - -
-
------ ----- -------- ---------------- -
----- ----- - ---------------
------ - ------ --------- ----- -
-
------ ------- ----数据处理
在 lib 目录下，创建 posts.js 文件，用于获取和处理数据。
-- -------------------- ---- -------
-- ------------
------ -- ---- ----
------ ---- ---- ------
------ ------ ---- -------------
------ ------ ---- --------
----- -------------- - ------------------------ ---------
------ -------- ------------- -
----- --------- - ------------------------------
------ ---------------------- -- -
----- -- - ------------------------- ---
----- -------- - ------------------------- ---------
----- ------------ - ------------------------- -------
----- ------------ - --------------------
----- ------- - ----------------------------
------ - --- -------- -------------------- -
--
-
------ -------- --------------- -
----- -------- - ------------------------- -----------
----- ------------ - ------------------------- -------
----- ------------ - --------------------
----- ------- - ----------------------------
------ - --- -------- -------------------- -
-
------ -------- --------------- -
----- --------- - ------------------------------
------ ---------------------- -- -
------ -
------- - --- ------------------------- --- -
-
--
-组件
在 components 目录下，创建 Layout.js 组件，用于渲染公共布局。
-- -------------------- ---- -------
-- --------------------
------ ---- ---- -----------
-------- -------- -------- -- -
------ -
--
------
--------- ------------
-------
-----------------------
-----------------------
-----------------------
---
-
-
------ ------- ------在 components 目录下，创建 PostList.js 组件，用于渲染文章列表。
-- -------------------- ---- -------
-- ----------------------
------ ---- ---- -----------
-------- ---------- ----- -- -
------ -
----
--------------- -- -
--- --------------
----- ---------------------------
-------------------
-------
-----
---
-----
-
-
------ ------- --------Markdown
在项目根目录下，创建 _posts 目录，用于存放 Markdown 格式的文章。
例如，在 _posts 目录下创建 hello-world.md 文件。
--- title: Hello World --- # Hello World This is my first post!
此时，启动应用，访问 http://localhost:3000 即可看到博客应用。
总结
通过本文介绍，读者应该已经学会了如何使用 Next.js 构建 React 应用，并且能够通过一个示例，深入了解 Next.js 的使用和优势。同时，也应该注意到 Next.js 的更多功能和特性，例如动态导入、代码拆分等方面的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a030b548841e9894c8a6e8