next kickstart

次のキックスタート

next.jsボイラープレートを詰め込んでいます。ゼロセットアップ。エッジの準備ができました。

一部の機能は、環境変数（機能リストに示されている）に依存するため、有効にする必要があります。デフォルトでは無効になっているため、アプリはセットアップなしで実行されます。それらは@enable {feature}が表示される場所の下にすべての行を除去することで有効にすることができます。

特徴

他の機能セットのリポジトリブランチを表示（BUN）

コア

• タイプスクリプト- タイプの安全性を最大化するように構成されています
• T3 Env-環境変数検証
• TRPC-クライアントコンポーネントとサーバーコンポーネントの両方で機能するエンドツーエンドタイプセーフAPIを作成する
• ⚡ウェブケット- リアルタイム通信（プッシャーを使用しますが、代替案のために交換できます）
  • ？エンドツーエンドタイプセーフイベントのためにTRPCと統合します
• ？ DRIZZLE -ORM最大タイプの安全性
• Lucia Auth-柔軟で安全な認証
  • ？ Drizzleと統合してAuthデータを保存します

発達

• ？ ESLINT-一貫したコード標準
• きれい- 一貫したコードスタイリング
• ？ Tailwind CSS-ユーティリティファーストCSSフレームワーク
• ？ Shadcn/ui- Radix UIおよびTailwind CSSで構築されたコンポーネント
• MDX-コンポーネントでマークダウンを使用します
• ？絶対インポート- より簡単でクリーンなモジュールのインポート
• VSコード構成- 簡単にデバッグするための構成

テスト

• ？ Vitest-柔軟なテストフレームワーク
• ？反応テストライブラリ- 保守可能なコンポーネントテスト
  • ？テストフレームワークとしてVitestと統合します
• ？ Playwright-複数の環境に対するエンドツーエンドのテスト

展開

• バンドルアナライザー- 各環境のバンドルサイズを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で無視されます）

ルシア・オーディ

（有効化が必要です）

• src/app/api/auth
• src/app/auth
• src/components/auth.tsx
• src/db/schemas/auth.ts)データベースに認証データを保存します
• src/lib/auth.ts
• types/lucia.d.ts

例

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

MDX

• mdx-components.tsx

Next-PWA

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

劇作家

• e2e/
• playwright.config.ts

きれい

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

反応テストライブラリ

• 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環境変数はビルド時に検証されます

Tailwind 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を使用してタイプセーフティを増加させます

vitest

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

VSコード

• .vscode/extensions.json推奨ワークスペース拡張機能
• .vscode/launch.jsonデバッグ構成
• .vscode/settings.jsonプロジェクトTypeScriptバージョンを使用します

プッシャー付きのWebSockets

（有効化が必要です）

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

例

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