next kickstart

下一步

功能包装Next.js样板。零设置。准备好了。

某些功能取决于环境变量（在功能列表中指示），因此需要启用。默认情况下，它们是禁用的，因此应用程序在没有任何设置的情况下运行。可以通过在出现@enable {feature}位置下删除所有线条来启用它们。

特征

查看其他功能集的存储库分支（例如BUN）

核

• 打字稿- 配置以最大化类型安全性
• T3 Env-环境变量验证
• TRPC-创建在客户端和服务器组件中都起作用的端到端类型安全性API
• ⚡WebSocket-实时通信（使用推动器，但可以换成替代方案）
  • ？与TRPC集成以进行端到端类型安全事件
• ？毛毛雨- 带有最大型安全性的ORM
• Lucia auth-灵活且安全的身份验证
  • ？与细雨集成以存储验证数据

发展

• ？ ESLINT-一致的代码标准
• 漂亮- 一致的代码样式
• ？ Tailwind CSS-公用事业第一CSS框架
• ？ SHADCN/UI-由Radix UI和尾风CSS构建的组件
• MDX-将Markdown与组件使用
• ？绝对导入- 更轻松，更清洁的模块导入
• VS代码配置- 配置用于轻松调试

测试

• ？ vitest-灵活的测试框架
• ？ React测试库- 可维护的组件测试
  • ？与Vitest作为测试框架集成
• ？剧作家- 针对多种环境的端到端测试

部署

• 捆绑分析仪- 通过pnpm run build:analyze
• ？ Next -PWA-将您的网站作为渐进式网络应用程序（PWA）制作
• ？ Docker- （本地和生产）Docker -Compose和Dockerfiles，用于在任何地方运行
• GitHub动作- 强大的CI/CD

？入门

选项1：克隆并与Vercel部署

？选项2：克隆并在本地运行

1. 叉这个存储库（如果您对其他分支 /功能集有兴趣，则仅复制main分支”
2. 克隆您的新存储库
3. 安装依赖项并运行开发服务器

• 使用PNPM

  pnpm install
  pnpm run dev

• 或与Docker

  docker-compose --file docker/dev/docker-compose.yml up

配置

Docker

• .dockerignore
• docker/ - Dockerfile和Docker -Compose.yml用于开发和生产

细雨

（需要启用）

• src/db/
• src/lib/db.ts
• drizzle.config.ts

eslint

• .eslintrc.json

github动作

• .github/workflows/ci.yml next.config.mjs

卢西亚·艾弗（Lucia Auth）

（需要启用）

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts)将auth数据存储在数据库中
• src/lib/auth.ts
• types/lucia.d.ts

例子

• src/app/examples/profile/page.tsx

MDX

• mdx-components.tsx

下一个PWA

• public/icon-512x512.png
• public/manifest.json
• next.config.mjs

剧作家

• e2e/
• playwright.config.ts

更漂亮

• .eslintrc.json
• .prettierignore
• .prettierrc.json

React测试库

• src/app/page.test.tsx
• testing/setup.ts

shadcn/ui

• src/components/providers/theme-provider.tsx
• src/components/ui/
• src/components/theme-toggle.tsx
• components.json

T3 Env

• src/env.mjs配置环境变量
• next.config.mjs环境变量在构建时间验证

尾风CSS

• src/styles/globals.css
• tailwind.config.js

trpc

• src/app/api/trpc/[trpc]/route.ts
• src/components/providers/trpc-provider.tsx
• src/trpc/

例子

• src/app/examples/client-component/page.tsx在客户端组件中使用
• src/app/examples/server-component/page.tsx在服务器组件中使用

打字稿

• tsconfig.json用评论解释了Create-Next-App的所有修改
• types/reset.d.ts使用ts-reset增加类型安全

vitest

• testing/setup.ts
• vitest.config.ts

VS代码

• .vscode/extensions.json推荐的工作区扩展
• .vscode/launch.json 。JSON-调试配置
• .vscode/settings.json使用项目打字稿版本

带推器的Websocket

（需要启用）

• src/hooks/useEvent.ts
• src/lib/events.ts
• src/trpc/methods.ts

例子

• src/app/examples/websockets/page.tsx