使用HereDoc自动化create-next-app失败，原因何在？

你尝试用HereDoc批量回答create-next-app的交互式提问，执行命令如下：

> npx create-next-app@latest <<EOF
app1
No
Yes
Yes
Yes
Yes
Yes
@/*
EOF

但终端输出显示所有输入被合并成了一行：

? What is your project named? › app1NoYesYesYesYesYes@/*% 

导致无法正常创建Next.js项目，而正常流程是分步骤依次提问并回答的。

问题原因 #

create-next-app依赖**交互式终端工具（比如Inquirer.js）**来收集配置选项，这类工具会直接读取终端的TTY（交互式终端设备）输入，而非普通的管道输入。HereDoc本质是通过管道将内容传递给命令，但交互式工具不会识别管道输入里的换行符，会把所有内容当作一个连续的输入流一次性读取，最终所有回答被合并成了一行，自然无法匹配各个提问的要求。

解决方法 #

要自动化创建Next.js项目，不用HereDoc，直接用命令行参数或非交互式模式即可：

1. 直接用命令行参数指定所有配置 #

对应你想要的选项，执行以下命令就能一键创建：

npx create-next-app@latest app1 --no-typescript --eslint --tailwind --src-dir --app --import-alias "@/*"

各参数对应你的选择：

• app1：项目名称
• --no-typescript：不使用TypeScript
• --eslint：启用ESLint
• --tailwind：启用Tailwind CSS
• --src-dir：使用src/目录
• --app：启用App Router
• --import-alias "@/*"：配置导入别名@/*

2. 用配置文件配合非交互式模式 #

如果参数太多，可先创建一个create-next-app.config.js配置文件：

module.exports = {
  typescript: false,
  eslint: true,
  tailwind: true,
  srcDir: true,
  appDir: true,
  importAlias: "@/*",
};

然后执行命令，--yes会跳过交互式提问，直接读取配置文件完成创建：

npx create-next-app@latest app1 --yes

内容的提问来源于stack exchange，提问作者LittleTeemo