前言
Next.js 是一个 React 应用程序的轻量级框架，它为开发者提供了许多有用的工具和功能，可以帮助我们更快速、更高效地构建客户端应用程序。本文将介绍 Next.js 的基本概念，并演示如何使用 Next.js 构建一个客户端应用程序。
Next.js 基础知识
环境配置
在使用 Next.js 之前，我们需要安装 Node.js 和 npm 包管理器。安装完成后，请执行以下命令：
npm install -g create-next-app
创建应用程序
使用 create-next-app 工具创建一个 Next.js 应用程序非常简单。请运行以下命令：
npx create-next-app my-app cd my-app npm run dev
这将创建一个名为 my-app 的新应用程序，并启动开发服务器。您可以开始编写代码了。
页面和路由
Next.js 的核心概念之一是页面。页面是 React 组件的简单映射，用于将 URL 和组件绑定在一起。默认情况下，每个文件夹下的 index.js 文件都对应于一个页面。
例如，如果您在 pages 目录下创建了一个名为 about.js 的文件，则您可以通过访问 /about URL 来访问该页面。
function About() { return <h1>About us</h1>; } export default About;
动态路由
在 Next.js 中，您可以使用动态路由创建带参数的页面。例如，如果您想创建一个名为 [id].js 的文件，您可以创建一个动态路由页面。在这个示例中，您可以使用 URL 参数来动态设置页面的 ID 值：
-- -------------------- ---- ------- -------- ------ ---- -- - ------ - -- --------------------- ------------------ --- -- - ------ ----- -------- ---------------- - ----- -------- - ----- ------ ------------------------------------------------------ -- ----- ----- - ----- ---------------- ----- ----- - -------------- -- -- ------- - --- ------------------ -- ---- ------ - ------ --------- ----- -- - ------ ----- -------- ---------------- ------ -- - ----- -------- - ----- ------ --------------------------------------------------------- -- ----- ---- - ----- ---------------- ------ - ------ - ---- - -- - ------ ------- -----展开代码
在上面的示例中，我们使用 getStaticPaths() 和 getStaticProps() 方法获取数据并将其传递到组件中。这些函数是 Next.js 中常用的两个方法，可以用于获取服务器数据和构建静态页面。
运行 dev 和生产模式
您可以使用以下命令分别启动开发和生产模式：
npm run dev
npm run build
npm run start开发模式可以在本地计算机上启动开发服务器，并在本地机器上构建应用程序。生产模式可用于构建和部署生产应用程序。
使用 Next.js 构建客户端应用程序示例
现在，我们将使用 Next.js 构建一个简单的客户端应用程序，它包括以下功能：
- 列出可用商品
- 通过各种选项筛选商品
- 显示商品详细信息
安装所需的库
我们需要使用 React、Next.js、Axios 和其它相关库来构建我们的应用程序。请执行以下命令安装这些依赖项：
npm install react react-dom next axios
创建页面
我们需要创建首页和商品详情页面，分别对应于 / 和 /products/[productId]。我们还需要一些 React 组件和 API 路由：
mkdir pages components api在 pages/index.js 中，我们使用 Axios 获取所有商品并显示它们的名称列表。我们还使用 React 组件 Link 来允许用户单击名称以查看有关该商品的更多详细信息：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---- ---- ------------ -------- ------ -------- -- - ------ - ----- ----------- -- --- ---------- ---- --------------------- -- - --- ----------------- ----- --------------------------------- --------------------- ------- ----- --- ----- ------ -- - ------ ----- -------- ---------------- - ----- -------- - ----- --------------------------------------------- ----- -------- - ----- -------------- ------ - ------ - --------- -- -- - ------ ------- -----展开代码
在上面的示例中，我们使用 getStaticProps() 获取商品数据并将其传递到组件中。
现在，我们需要创建商品详细信息页面。在 pages/products/[productId].js 中，我们使用 Axios 获取特定商品的详细信息。然后，我们使用 useRouter hook 和 useEffect hook 更新页面 URL：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- -------------- ------ - ---------- -------- - ---- -------- -------- --------- ------- -- - ----- ------ - ------------ ----- --------- ----------- - --------------- ------------ -- - ----------------- ----- ----------------------------------------------------------------- -------------- -- - -------------------------- ------------------ -- ------------ -- - ------------------- ------------------ --- -- ---------- -- --------- - ------ ---------------------- - ------ - ----- ----------------------- ---- ------------------- ------------------ -- ---------------------------- --------- ------------------- ------ -- - ------ ----- -------- ---------------- - ----- -------- - ----- --------------------------------------------- ----- -------- - ----- -------------- ----- ----- - -------------------- -- -- ------- - ---------- --------------------- -- ---- ------ - ------ --------- ----- -- - ------ ----- -------- ---------------- ------ -- - ----- -------- - ----- ---------- ----------------------------------------------------- -- ----- ------- - ----- -------------- ------ - ------ - -------- -- -- - ------ ------- --------展开代码
在上面的示例中，我们使用 getStaticPaths() 和 getStaticProps() 获取商品数据并将其传递到组件中。
创建 API 路由
我们需要创建 GET API 路由，这些路由将返回所有商品和某个商品的详细信息。在 pages/api/products.js 中，我们使用 Axios 获取数据库中的商品，然后将其发送回客户端：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ----- ----- ---- -- - ----- -------- - ----- --------------------------------------------- ----- -------- - ----- -------------- -------------- - ---- ----------------------------- -------------------- ---------------------------------- --展开代码
在 pages/api/products/[productId].js 中，我们使用 Axios 获取特定商品的详细信息，然后将其发送回客户端：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ----- ----- ---- -- - ----- - --------- - - ---------- ----- -------- - ----- ---------- ---------------------------------------------- -- ----- ------- - ----- -------------- -------------- - ---- ----------------------------- -------------------- --------------------------------- --展开代码
构建和部署应用程序
现在，我们已经为我们的客户端应用程序编写了所有必需的代码。只需使用以下命令将其构建并部署到服务器上：
npm run build
npm run start或者，您可以将项目上传到外部托管服务（如 Heroku 或 Now）和部署应用程序。
结论
Next.js 是一个非常有用和有用的 React 应用程序框架，可以提高开发效率和代码质量。在本文中，我们介绍了 Next.js 基础知识，并演示了如何使用它来构建客户端应用程序。现在，您应该具备构建实际应用程序所需的工具和知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d0ebf82fcee791c63a973
