构建可复用的 Next.js 启动模板，避免编写冗余代码
了解一名开发者如何用日益完善的简约型商店页面和着陆页模板，替代重复的 Next.js 清理工作。
每一个使用过 Next.js 的开发者都经历过这一套流程。
你输入代码：
npx create-next-app
……然后突然就面对着那个巨大而精美的 Vercel 登录页。
它看起来棒极了——简洁、现代，显然旨在给人留下深刻印象。
问题在于，一旦准备开始开发实际功能，那个登录页就会成为第一个被删除的东西。近两年来，每次启动新项目时都会重复同样的步骤：
- 删除登录页
- 删除示例组件
- 删除示例样式
- 删除示例 API 路由
- 删除示例字体
- 删除示例布局
- 删除示例元数据
一次又一次，项目接项目地重复着。
到了某个时候，继续做这种重复性工作就显得毫无意义了。
正是这种挫败感促使我创建了个人入门模板。
最初只是一个轻量级的预设，后来逐渐发展到两个、三个，现在则变成了一组简洁且最新的 Next.js 入门模板。
以下是它的演变过程。
真正的问题：华丽的起点，而非极简的起点
Next.js 本身非常出色，但其默认框架是为了展示功能而设计的，并非为了给你一个空白的开发平台。
开箱即用时你会得到：
- 一个完整的营销风格着陆页
- 动画效果
- 渐变背景
- 示例路由
- 示例组件
- 示例样式
- 示例元数据
- 示例字体
对于刚接触该框架的人来说，这确实很有用。但如果你已经知道自己在做什么，只是需要一个最基础的起点，那它反而会成为障碍。
我们的目标其实要简单得多：
- 没有多余的视觉元素
- 没有演示界面
- 没有占位路由
- 没有不必要的文件
- 一个真正空白的、可直接开始开发的基底
所以最终就构建出了这样的版本。
第一个预设：极简启动模板
这是最初的尝试。
这是一个紧凑且现代化的 Next.js 启动模板，具备以下特点：
- 最新的依赖版本
- TailwindCSS 集成
- TypeScript 6.0.3（稳定版本）
- 标准的 App Router 文件夹结构
- 完全没有演示组件
- 没有需要清理的首页冗余内容
它正好符合日常项目搭建的实际需求。
很快我们就发现，其他开发者可能也在面临同样的困扰。
第二个预设：店铺搭建的起点
在有了最简预设之后，大家接下来需要的就是带有更多内置结构的内容——适用于：
- 产品目录页面
- 店铺布局设计
- 电子商务原型
- 各类全栈应用
于是便有了第二个预设，它包含：
- 简洁的界面
- 产品网格布局
- 基础筛选功能
- 为添加数据库和认证系统准备好的基础框架
- 现代化的UI组件
- 相同稳定的TypeScript版本
它并非完整的电子商务解决方案，只是一个扎实的起步基础。
第三个预设：产品介绍页模板
接着又有了另一个认识：
大多数开发者都不愿每次都从零开始构建着陆页。
于是又出现了第三个预设方案，它提供：
- 简洁的标题区域
- 用于突出展示产品的位置
- 行动号召板块
- 响应式布局
- 极简的设置流程
- 易于自定义的功能
它非常适合用于：
- SaaS产品
- 产品发布页面
- 营销网站
- 简单的项目展示页
至此已有三个预设方案，每个都针对不同的实际需求。
为何选择TypeScript 6.0.3作为标准
Next.js 16已发布稳定版本，但TypeScript 7在整个生态系统中尚未完全普及。
诸如装饰器、事件发射行为以及模块解析等细节在各种工具中仍在不断完善中。
基于此，制定了一条简单的指导原则：
在 Vercel 确认与 TypeScript 7 兼容之前，所有预设都使用稳定版的 TypeScript 6.0.3。
这一决定使得这些预设更具可预测性、可靠性，也更容易让新手上手。
意外的成果：不断发展的生态系统
最初并无打造一系列模板、同时维护多个入门项目或为其中任何项目编写文档的打算。
但后来出现了：
- 一个最小化入门项目
- 一个商店页面入门项目
- 一个着陆页入门项目
……显然，这已经发展成了更为庞大的体系。
一个由简洁现代的 Next.js 启动模板构成的小型生态系统已经初具规模。
这正是早些时候就应该有的实用资源。
未来展望
计划是逐步扩展这一体系，具体包括：
- 改进文档
- 实时演示部署
- 更多预设模板
- 可能开发 CLI 工具
- 可能提交到模板市场
这些都不是紧急事项，只是随着时间逐步推进。
总结
这一切并非出于想要成为模板维护者的初衷，而是因为反复删除相同的 Vercel 首页实在令人厌烦。往往最有用的工具都是从解决自己反复遇到的问题中诞生的。
如果你是正在寻找以下条件的 Next.js 开发者：
- 整洁的项目结构
- 最新的依赖项
这些预设不仅能节省创建它们时所花费的时间，还能为你进一步节省时间。
https://github.com/vedanshshetti/nextjs-preset
相关阅读
- 使用 Next.js App Router 构建稳健的电影详情页 — 了解如何利用异步服务器组件、待处理的参数以及真正的 404 处理机制，在 Next.js App Router 中正确获取并缓存 OMDB API 数据。
- 从部署 Next.js SaaS 与构建脚手架 CLI 中获得的经验 — 阐述了关键决策，包括技术栈选择、身份验证、多租户架构、计费方式以及状态管理，同时还介绍了如何构建能够简化 Next.js 项目设置的 CLI 工具。
- 在 Next.js 16 TypeScript 项目中配置 Prisma 7 — 学习如何在 Next.js 16 应用中安装、配置 Prisma 7 并与 PostgreSQL 集成，同时构建单例客户端以避免连接泄漏问题。