在前端开发中，使用现代化的工具和技术已经成为了标配。在 React 项目中，使用 Next.js 是非常常见的选择。Next.js 不仅仅提供了一些常见问题的解决方案，还提供了一些高级特性，如静态导出和服务端渲染。但是，Next.js 的配置是相对繁琐的，尤其是在新项目的创建和开发过程中。为了解决这个问题，npm 社区中出现了不少便于使用 Next.js 的脚手架工具，其中 make-new-next-app 就是一款优秀的选择。
本篇文章旨在介绍 make-new-next-app 的使用方法，并带领读者创建一款简单的 Next.js 应用。
安装 make-new-next-app
在开始之前，我们需要确保自己已经安装了首要的工具——Node.js 和 npm。检查方法为在命令行中输入以下两个命令。
---- -- --- --
如果命令运行后输出了对应的版本号，则表示你已经成功安装了 Node.js 和 npm。若未安装，请参考官方文档进行安装。
安装 make-new-next-app 的方式也很简单，只要在命令行中输入以下命令即可：
--- ------- -- -----------------
该命令会将 make-new-next-app 包全局安装到本地的 npm 环境中。
创建项目
make-new-next-app 的默认工作模式非常方便，它会快速地创建一个 Next.js 应用，同时为该应用添加基础的配置和文件结构。
在命令行中输入以下命令来创建一个名为 my-first-next-app 的 Next.js 应用：
----------------- -----------------
这个过程可能会花费一些时间，因为 make-new-next-app 会自动化地运行一系列命令来创建项目所需的依赖和文件。
一旦项目创建完成，我们就可以进入项目目录中并启动该项目：
-- ----------------- --- --- ---
至此，my-first-next-app 就已经成功地运行起来了。在浏览器中打开 http://localhost:3000/，你可以看到 Next.js 的欢迎页面。
修改配置
make-new-next-app 使用默认配置创建的项目已经可以正常运行，但是它并不满足所有需求。毕竟每个项目都是独立的，都有自己的特点和要求。
比如我们现在想要更改项目的端口号。这就需要我们修改项目的配置文件。
我们可以在项目根目录下找到 next.config.js 文件，这是用来配置项目的 Next.js 配置文件。
我们可以在下列代码中添加 port 属性来指定端口号：
-------------- - -
-- ------ ------- ---- --
-------------- -
-------------- ------
--
---- ---
--------------- -------- -
-- ------- ------ ------------- ----
------ ------
--
----- ---------------- -- ----- -- -----
-修改完毕后，重新启动项目即可生效。
添加页面
现在我们已经创建了一个基础的 Next.js 项目，并进行了部分配置修改。接下来，我们需要给项目添加一些页面。
使用 make-new-next-app 创建的项目默认只有一个 Index 页面。我们可以复制该页面并改为一个新的名字，或者新建一个模块来实现更加复杂的功能。
比如我们新建一个名为 about.js 的页面，在该页面中输出简单的文字：
----- ----- - -- -- -
-----
--------- --- --------
----- ----- ---- --- -- - ------ ------- --- --- ------- -----------------
------
-
------ ------- -----添加完毕后，我们需要在 pages 目录下新建一个名为 about.js 的文件，并将上述代码添加到其中。
现在我们可以通过 /about 路径来访问新建的页面了。
添加样式
make-new-next-app 自带了 styled-components 和 sass，可以方便地添加样式。我们只需要在页面中引入对应的依赖即可。
比如，在 about.js 中添加样式：
------ ------ ---- -------------------
----- --------- - -----------
---------- ------
------- - -----
-------- -----
--------------- -------
------------ -------
---------------- -------
----------- ------
-- -
---------- -----
----------- -------
-
- -
---------- -----
----------- -------
-
-
----- ----- - -- -- -
-----------
--------- --- --------
----- ----- ---- --- -- - ------ ------- --- --- ------- -----------------
------------
-
------ ------- -----这段代码引用了 styled-components，将 h1 和 p 标签进行了样式修饰。
发布项目
在修改和完善完毕项目后，我们需要将项目发布到生产环境中。
在 Next.js 中，我们可以通过运行下述命令来生成静态文件并将其上传至服务器：
--- --- -----
该命令会将项目进行构建，并最终生成一组静态 HTML 文件。这些文件可以部署在任何静态文件服务器上，并且保持访问速度很快。我们可以将生成的文件部署到 VPS 上进行访问。
至此，你已经成功地通过 make-new-next-app 创建了一个简单的 Next.js 应用，并完善了一些基础的配置和页面添加。希望本文对读者有所帮助，同时也鼓励读者继续深入 Next.js 的应用，构建出更加高效和优秀的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f85238a385564ab6c99