每次在WebStorm里创建Next.js项目还没开始写代码先跳出一个界面问你要不要用官方推荐的默认配置。三个选项看着简单但选偏了后面目录结构、技术栈全跟着跑。紧接着还有一连串细节选项TypeScript、Tailwind、App Router……新手能懵半天。今天按实际创建流程从这第一个界面到最后一个勾选全给你讲明白附上我自己在生产项目里用的那套配置拿来直接抄。第一个界面三个选项到底怎么选1. Yes, use recommended defaults官方推荐默认配置这是Next.js团队给出的“黄金标准”一键配好最主流的技术组合TypeScript、ESLint、Tailwind CSS、App Router还有一个给AI看的AGENTS.md。省心是真省心不用动脑子创建完就能写业务。特别适合快速起个demo或者初学者想最快跑通流程。但它有两个让我不太舒服的地方一是没有src/目录app、components这些文件夹全摊在根目录项目一大看着就乱二是强制绑了Tailwind如果你压根不想用原子化CSS想自己配Sass或CSS Modules后续得手动去删依赖、改配置有点烦。2. No, reuse previous settings复用上次的设置这个选项只有你在这台电脑上创建过Next.js项目才会出现。它会直接套用你上次勾选的那套配置。好处是快而且如果你维护了好几个同类项目能保证技术栈统一。坏处也很明显万一你上次建项目是半年前很多默认值可能已经跟不上Next.js新版的变化了。我一般不太选它除非是密集开发几个同质项目。3. No, customize settings自己动手选选这个接下来所有选项你都能自己定。TypeScript要不要Tailwind关不关src/目录开不开App Router还是老Pages Router全由你。对有点经验的开发者或者要往生产环境放的项目我强烈建议选这个。尤其是我这种有清理强迫症的必须把源码收进src/目录根目录只留配置文件。稍微多花半分钟勾选换来一个清爽的工程骨架很值。小结一下这个界面的选择策略只是想尝鲜、快速写个demo → 无脑选第一个推荐默认几分钟就能跑起来。打算正经做项目、希望结构规整 → 选第三个自定义然后手动把src/目录开起来。底下具体选项我下面挨个说。选了“自定义”后这8个详细选项怎么勾当你选了第三个“No, customize settings”马上会进到一个选项列表。下面就是我的实际选择以及每一条的理由全是人话。1. 要不要用 TypeScript这大概是争议最小的一个。开没商量。类型系统的好处不是让你写出花来而是三个月后回头改代码时编辑器能弹个提示告诉你“这里少传了一个必填字段”而不是上线后用户替你试出来。现在主流组件库、工具链全都有 TS 声明生态早就跟上来了。即便团队里有人对类型系统不太熟开始慢一点也远比后期修没有类型保护的 bug 划算。结论直接选 Yes省掉以后迁移的痛苦。2. Linter 选哪个以前只有ESLint现在多出来了Biome和NoneESLint老大哥规则最全Next.js官方的eslint-config-next把常用规则配好了生态最强出问题一搜一大把解决方案。绝大多数项目和团队都应该用它。Biome新起之秀主打一个字快。集成了格式化和lint配置文件简单是冲着取代ESLintPrettier去的。它发展很快但有些插件生态还比不上ESLint如果你团队里有老的项目迁移可能有点折腾。个人项目可以尝鲜公司项目求稳别动。None啥也不要裸奔。除非你有特别理由否则别选。后面手动再加linter够麻烦的。我的建议直接选ESLint稳如老狗。如果你自己玩小项目想体验一把Biome的飞速可以选Biome但要清楚后续风险。None就别考虑了。3. React Compiler重头戏如果你第一次见到这名词别慌简单说它是一个编译阶段自动帮你加useMemo、useCallback和React.memo的插件让你不再手写这些优化代码。过去我们为了防止组件没必要的重渲染到处用useCallback把函数包起来、用useMemo把值包起来依赖列表一不小心漏写一个代码看起来又乱又臃肿。React Compiler 会在构建时分析你的组件和 Hook自动生成记忆化版本相当于偷偷给你优化好了你写的代码还是干干净净的业务逻辑。现在能直接用吗React 19 已经把它作为实验性功能带上了Meta 自己在 Instagram 那儿跑得挺欢。你如果建个个人项目、玩具、demo大胆打开体验一下未来 React 的顺手感但如果是要交付给甲方、公司的核心业务我建议先关掉——不是它不行而是万一哪个边缘地方出点小毛病排查起来还得先把编译器关了才能对比浪费工期。等社区再跑一段时间稳定了我肯定无脑开。结论尝鲜开求稳关自己拿捏。4. Tailwind CSS 选不选选了之后你的标签上可能就是classNameflex items-center gap-2 px-4这种又长又丑的样式但写多了会发现真香。不用在文件和文件之间跳来跳去想类名不用纠结命名响应式一行搞定打包时用不到的样式自动被摇掉体积控制得很好。Next.js 生态下 Tailwind 几乎成了默认搭档各种模板、UI 库也都优先用它。如果你是 CSS 原教旨主义者就想用 CSS Modules 或者 styled-components选 No 也没问题。但如果还在犹豫跟着大家走开 Yes不会错。5. 代码要不要套一个src/目录也就是把app、components等全塞进src/里根目录只留些配置文件。我喜欢开这个拆得清楚一眼知道工程代码在哪儿不像以前翻个next.config.js还得在一堆业务目录里找。官方也推荐这么干的没什么副作用。直接 Yes保持干净。6. App Router 到底用不用看到“推荐”两字你就该直觉选 Yes。App Router 是 Next.js 新路由体系支持 React Server Components、布局嵌套、流式渲染等一大堆新东西性能更好架构更现代。老 Pages Router 虽然还能用但官方已经明说了往后新功能主要加到 App Router 上了。新项目不从它开始等于主动落后一个时代。必须 Yes根本不用纠结。7. 要不要自定义导入别名默认是/*可以直接用/components/Button这种写法。别改。一改默认值后面很多工具、插件、AI 代码补全都按照/*去识别自己另搞一套反而折腾。除非你们团队有历史习惯否则保持默认就完事儿。8. AGENTS.md 要不要加现在自动生成的那个文件打开就几行字乍一看好像啥也没说。但其实它就是个给 AI 助手看的“校准提醒”核心意思就一句“嘿别用你训练数据里那套老 Next.js 知识先去我本地node_modules/next/dist/docs/里翻翻最新文档。”如果你平时用 Copilot、Cursor 这些 AI 帮忙写组件留着它就能让 AI 少出一些过时的写法更贴合你当前项目版本。要是你纯手写代码这文件就是个摆设。我自己是重度 AI 辅助所以会留着。我现在的无脑选择组合最后给你一份我现在建项目的真实选择拿来就能照着点TypeScript✅ESLint✅默认React Compiler❌ 线上项目先不开个人玩具随便开Tailwind CSS✅src/ 目录✅App Router✅自定义别名不改保持/*AGENTS.md✅这套配置拉下来的项目结构现代、性能到位、以后维护起来不糟心。下次再碰到这一串问题心里有数一路回车到底。下图是项目创建完成的目录结构补充如何把默认的 npm 改成 pnpm注意到这里创建的项目使用的是npm想换成 pnpm 其实不用重新生成三步搞定把项目根目录里那个package-lock.json删了。终端跑pnpm installpnpm 自己会读package.json生成pnpm-lock.yaml别的不用管。后面就正常用pnpm dev、pnpm build就行。