SuperAPI AI 工具集

scaffold-nextjs-app

前端与建站

查看项目

更新于 10-16 03:43

技能介绍

用途:从零搭建一个使用 App Router、TypeScript 和生产级默认配置的 Next.js 应用,适合新建 Web 项目、需要服务端渲染的 React 前端、含 API 路由的全栈应用,以及 TypeScript Web 项目初始化。

主要能力:通过 create-next-app 非交互式创建项目;可选 Tailwind CSS、ESLint、src/ 目录结构;配置 next.config.ts(如 reactStrictMode、图片远程域名);建立 src/app/api、src/components、src/lib、src/types 等目录约定;编写根布局 layout.tsx 与示例 API 路由;启动开发服务器并做验证。

必要用法:输入应用名称与包管理器(npm、yarn、pnpm),可选是否包含 Tailwind(默认是)、ESLint(默认是)、src/ 目录(默认是)。核心命令:

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

若命令卡在交互提示,可加 --use-npm(或 --use-pnpm/--use-yarn)。创建目录:

mkdir -p src/app/api mkdir -p src/components mkdir -p src/lib mkdir -p src/types

启动:cd my-app 后运行 npm run dev,默认访问 http://localhost:3000。

验证:npm run dev 无错误启动、首页可访问、TypeScript 编译通过、Tailwind 类生效、/api/health 可响应、npm run lint 无错误。

限制与注意:Next.js 要求 Node.js >= 18.17(用 node --version 检查);默认端口 3000 可能被占用,可用 npm run dev -- -p 3001;@/* 映射到 src/*,勿与 node_modules 导入混淆;需确认使用 App Router(src/app/)而非 Pages Router(src/pages/);API 路由文件必须导出具名 HTTP 方法处理器而非默认导出。资料未提供收费、价格与平台信息。