🔰

新規アプリ立ち上げ時の初期セットアップ

に公開
Next.js
TypeScript
初学者向け
初期セットアップ
idea

0→1でアプリや社内ツールを作ることが多く、そのたびに行う初期セットアップをまとめました。
特に初学者でも手を動かしやすい構成を意識しており、「手軽に始められて、よく使われることが多い」技術を例にしています。

採用技術（例）

  • 言語：TypeScript
    • フロントとバックエンドをこれ１つで書けて得られる恩恵が大きい
  • アプリケーション：Next.js
    • ホスティングが簡単で、これだけでフルスタックアプリを構築可能。学習コストに対して得られる恩恵が大きい
  • UI：shadcn/ui + Tailwind CSS
    • 必要なコンポーネントを追加するだけで、それなりのモダンなUIを手早く作れる
  • DB：Supabase
    • ローカル開発で DB をすぐに立てられる。認証やストレージなども付属してる
  • ORM：Drizzle ORM
    • マイグレーション運用が軽く、型安全。小さく始めて長く使える
  • リンター/フォーマッター：Biome
    • リンターとフォーマッターがこれ1つで完結
  • CI/CD：GitHub Actions
    • 標準的で導入も容易。最小限の設定で品質担保が可能
  • ホスティング：Vercel
    • Next.js を公式にサポートしており、GitHub 連携でワンボタンデプロイできる

プロジェクトの初期化

1. Create Next App

npx create-next-app@latest

2. Git / GitHub 設定

開発ツールのセットアップ

リンター / フォーマッターの導入

コード品質を担保するために必須。Next.js 15.5 以降は初期化時に Biome を選択可能です。
ESLint + Prettier という構成も定番ですが、Biome なら一つのツールで完結できます。

UIライブラリ導入

Tailwind は Next.js 初期化時にインストール可能。追加で UI コンポーネントを管理する場合は以下のように shadcn/ui を利用します。

npx shadcn@latest init

DB / ORM 設定

1. DB設定（Supabase）

npm install --save-dev supabase
npx supabase init
# ローカル DB を起動
npx supabase start

2. ORM設定（Drizzle ORM）

スキーマとマイグレーション管理のために ORM を導入します。

npm i drizzle-orm postgres
npm i -D drizzle-kit tsx

Docker 設定（任意）

ローカルで DB をコンテナ化する場合は docker-compose.yml を用意

CI/CD パイプライン構築

GitHub Actionsが手軽で始めやすいです

デプロイ

Vercel + Next.jsだとGitHub連携でワンボタンでデプロイ

おわりに

ここまでで、すぐ動かせる最小構成が整いました。小さく始めて、機能開発時に必要になったら認証（Better Auth / Clerk）、ストレージ（Amazon S3 / Cloudflare R2）、監視（Sentry）などを追加していきましょう。

Discussion