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