Next.js 是一款流行的 React 框架，其提供了服务端渲染(SVR)的能力，让我们能够轻松构建高性能、可扩展、SEO 友好的 Web 应用程序。而 create-next-app 则是 Next.js 专门为快速构建应用提供的脚手架工具。它是基于一个全新的 Next.js 应用程序模版，帮助我们快速搭建并启动一个 Next.js 应用程序，从而加快开发效率。
在本文中，我们将深入研究 create-next-app 工具的使用方法，在这个过程中，我们会创建一个全新的 Next.js 应用程序，并一步一步说明如何运用这个工具，以及如何扩展已有的代码，使得应用程序具有更好的性能和可用性。
安装 create-next-app
首先，你需要在你的电脑上安装 Node.js，并且已经支持 npm 包管理工具。接下来，打开终端工具，运行以下命令来安装 create-next-app 工具：
npm install -g create-next-app
如果你已经安装了 create-next-app 工具，那么你可以通过下面的命令来升级到最新的版本：
npm update -g create-next-app
创建一个新的 Next.js 应用程序
在安装了 create-next-app 工具之后，接下来我们就来创建一个新的 Next.js 应用程序。使用 create-next-app 很简单，只需要打开终端工具，执行以下命令即可：
npx create-next-app my-app
这个命令会创建一个新的 Next.js 应用程序，并将其命名为 my-app，它的目录结构如下所示：
-- -------------------- ---- -------
-------
--- ---------
--- -------------
--- ------------
--- ----------
--- ------
- --- -------
- --- ----
- --- --------
--- -------
- --- -----------
- --- ----------
--- -------
--- -----------
--- ---------------在这个应用程序中，我们可以看到一些预设的目录和文件，包括 pages、public 和 styles 等。其中，我们的 React 组件将会放在 pages/ 目录下，它们将作为我们应用程序的路由处理程序。
接下来，我们尝试启动这个新的应用程序，以确保它能够正常工作：
cd my-app npm run dev
这个命令会启动一个本地的开发服务器，然后打开浏览器，在地址栏中输入 http://localhost:3000，就可以看到我们新创建的 Next.js 应用程序了。
扩展应用程序
现在，我们拥有了一个全新的 Next.js 应用程序，接下来我们可以对其做一些扩展。例如，我们可以添加一些新的页面或组件，以及对样式进行更改。
添加新页面
在 Next.js 中，每个文件都对应着一个路由处理程序。例如，我们想要新建一个页面来展示一篇博客文章，我们可以在 pages/ 目录下新建一个文件，以此来处理这个路由请求。文件名的命名规则遵循 pages/ 目录下的规则，例如我们需要添加一篇题为 ‘hello-world’ 的文章，我们就可以在 pages/hello-world.js 中编写我们的路由处理程序。
-- -------------------- ---- -------
------ ----- ---- -------
-------- ---------- -- -
------ -
-----
--------- -----------
------
-
-
------ ------- ----------在这段代码中，我们创建了一个名叫 HelloWorld 的 React 组件，并将其导出。当我们访问 URL http://localhost:3000/hello-world 时，就会使用这个组件来渲染页面。
导入 CSS
现在，假设我们想要对我们的网站做一些样式上的改动。我们可以使用 CSS 或者 SCSS 等样式预编译器，以及 CSS Modules 功能，对页面进行样式调整。例如，我们可以在 styles/Home.module.css 文件中增加一些样式，并在 pages/index.js 文件中引入这个样式文件：
-- -------------------- ---- ------- -- ---------------------- -- ----- - ------- ------ ----------- ----- -------------- ----- - ------ - ----------- ----- -------------- ---- ---------- ----- ------------ ---- ------------ ---- -
-- -------------------- ---- -------
-- --------------
------ ------ ---- ---------------------------
-------- ---------- -
------ -
---- -----------------------------
---- ----------------- ----------- ----- ----------------------- --
--- -------------------------
------- -- -- --------------------------------------
-----
------
-
-
------ ------- --------导入静态资源
最后，假设我们想要向页面中添加一些图片或其他静态资源。我们可以将这些资源放置在 public/ 目录下，然后在我们的页面中通过相对路径引用它们。例如，我们可以在 public/ 目录下增加一张图片，并在我们的页面中使用它：
<!-- public/images/profile.png --> <img src="/images/profile.png" alt="Profile Picture" />
结论
create-next-app 工具是一个非常方便的工具，可以帮助我们快速启动并搭建一个 Next.js 应用程序。同时，它也为我们提供了一些预设的目录和文件，可以让我们更好地组织我们的代码和样式。
在本文中，我们演示了如何使用 create-next-app 工具来创建一个新的 Next.js 应用程序，并展示了如何添加新页面、导入 CSS 和静态资源。希望这篇文章对你有所帮助，并可以让你快速建立一个完整的 Next.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672874b62e7021665e204835