使用模板创建next-app

开始

在进行Web开发时，通常会使用不同的技术组合，但每个开发人员都会有自己经常使用的设置。例如，我使用i18n进行多语言处理，使用React Query进行API缓存。在设置项目初始设置时通常会花费很多时间，但如果将这些设置预先模板化，就可以节省时间并减少初始试错。

如何使用？

如果您正在使用Next.js，那么应该知道create-next-app命令。这是官方文档提供的功能。使用此命令，您可以轻松设置项目名称、是否使用TypeScript等。

npx create-next-app

然后仔细查看文档，您将找到今天要介绍的example选项。

将repo url作为选项一起输入，即可进行相应配置。将经常使用的设置预先push到Github上，然后输入repo的url，就可以节省时间。

使用示例

虽然功能简单，但对于像我这样不断创建小型项目的开发人员来说特别有用。Next.js在此处提供了多个模板。您可以按以下格式创建模板。

格式

npx create-next-app -e <Github URL>

示例

npx create-next-app -e https://github.com/danver-io/template-danver-web

进一步

虽然这样已经足够了，但如果您有多个模板，有一个很好的方法。在官方Repo中，一个Repo中包含多个模板。创建一个template repo并为每个文件夹添加自己的模板。例如，您可以创建SPA（单页应用程序）、移动应用程序等多个模板。在这种情况下，只需添加 --example-path [path-to-example] 选项即可。

格式

npx create-next-app -e <Github URL> --example-path <Path>

示例

npx create-next-app -e https://github.com/vercel/next.js --example-path examples/blog

执行结果