Next.js 是一个基于 React 的轻量级框架，它可以帮助开发者快速构建具有 SSR（服务器端渲染）和静态导出功能的 React 应用程序。本文将从入门到精通介绍 Next.js 的使用。
安装与创建项目
首先，需要安装 Node.js 和 npm。安装完成后，在终端中输入以下命令安装 Next.js：
npm install next react react-dom
安装完成后，使用以下命令创建一个新的 Next.js 项目：
npx create-next-app my-app cd my-app npm run dev
执行最后一条命令后，将启动 Next.js 开发服务器，并在 http://localhost:3000 上运行应用程序。
页面和路由
Next.js 使用文件系统来管理页面和路由。在 pages 目录下创建一个名为 index.js 的文件，就可以创建一个名为“主页”的页面。在 index.js 中，可以使用 React 编写页面的内容，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
-------- ---------- -
------ -
-----
----------- -- -- -------------
------- -- --- ---- ---------
------
-
-
------ ------- --------在 Next.js 中，路由是通过文件名来定义的。例如，index.js 文件对应的路由是 /。
数据获取
Next.js 提供了一个称为“数据获取”的功能，它可以在服务器端获取数据并将其传递给页面。可以使用 getServerSideProps 函数来实现数据获取。例如，以下代码从 API 中获取数据并将其作为 props 传递给页面：
-- -------------------- ---- -------
------ ----- -------- -------------------- -
----- --- - ----- -------------------------------------
----- ---- - ----- ----------
------ -
------ -
----
-
-
-
-------- ---------- ---- -- -
-- --------
-静态导出
Next.js 还提供了一种称为“静态导出”的功能，它可以将应用程序导出为静态 HTML 文件。可以使用 getStaticProps 函数来实现静态导出。例如，以下代码从 API 中获取数据并将其作为 props 传递给页面：
-- -------------------- ---- -------
------ ----- -------- ---------------- -
----- --- - ----- -------------------------------------
----- ---- - ----- ----------
------ -
------ -
----
-
-
-
-------- ---------- ---- -- -
-- --------
-
------ ------- --------在终端中使用以下命令进行静态导出：
npm run build npm run export
执行完 npm run export 命令后，将在 out 目录中生成静态 HTML 文件。
API 路由
Next.js 还提供了一种称为“API 路由”的功能，它可以在服务器端处理 API 请求。可以在 pages/api 目录下创建一个名为 hello.js 的文件来创建一个 API 路由。例如，以下代码创建了一个名为“hello”的 API 路由：
export default function handler(req, res) {
res.status(200).json({ message: 'Hello world!' })
}可以使用 fetch 函数从客户端调用此 API：
const res = await fetch('/api/hello')
const data = await res.json()
console.log(data.message) // 输出 "Hello world!"部署
Next.js 应用程序可以部署在各种托管平台上，例如 Vercel 和 Heroku。在 Vercel 上，只需将代码上传到 GitHub、GitLab 或 Bitbucket，并使用 Vercel CLI 进行部署即可。在 Heroku 上，可以使用 heroku create 和 git push heroku master 命令将代码部署到 Heroku。
结论
本文介绍了 Next.js 的基本使用方法，包括页面和路由、数据获取、静态导出、API 路由和部署。Next.js 是一个功能强大和易于使用的框架，可以帮助开发者快速构建具有 SSR 和静态导出功能的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760e75f03c3aa6a56067ab5