【YouTube／Build and Deploy a Cursor Clone】01: Project Setup

youtu.be

Polarisプロジェクト（AIコードエディタ）開発の第1歩として、2026年基準の最新フロントエンド基盤を構築します。Next.js 16、Tailwind CSS v4、そしてshadcn/uiを組み合わせた堅牢なセットアップ手順を解説します。

技術スタック概要
Step 1: Next.js プロジェクトの作成
Step 2: ディレクトリ構成
Step 3: Tailwind CSS v4 のセットアップ
Step 4: デザイントークン (カラーシステム)
Step 5: フォントの設定
Step 6: ダークモードの実装
Step 7: shadcn/ui のセットアップ
Step 8: ユーティリティ設定
Step 9: ベーススタイルの調整
動作確認

技術スタック概要

今回構築するプロジェクトの主要な技術スタックは以下の通りです。

カテゴリ	技術	バージョン
フレームワーク	Next.js (App Router)	16.1.1
言語	TypeScript	5.x
UIライブラリ	React	19.2.3
CSS	Tailwind CSS v4	4.x
コンポーネント	shadcn/ui (new-york)	3.8.4
テーマ管理	next-themes	0.4.6
アイコン	Lucide React	0.563.0

Step 1: Next.js プロジェクトの作成

create-next-app を使用してプロジェクトを生成します。今回は Next.js 16 を使用します。

 npx create-next-app@latest polaris

セットアップ時のオプション選択は以下の通りです。

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
src/ directory: Yes
App Router: Yes
Turbopack: No (必要に応じて後から有効化)
Import alias: @/* (デフォルト)

Next.js 16 は React 19 をフルサポートしており、Server Components や Server Actions が安定して動作します。

Step 2: ディレクトリ構成

src/ ディレクトリを採用し、アプリケーションコードと設定ファイルを分離します。主な構成は以下のようになります。

polaris/
├── public/                  # 静的アセット
├── src/
│   ├── app/
│   │   ├── globals.css      # グローバルスタイル & CSS変数
│   │   ├── layout.tsx       # ルートレイアウト
│   │   └── page.tsx         # トップページ
│   ├── components/
│   │   ├── theme-provider.tsx
│   │   └── ui/              # shadcn/ui コンポーネント
│   ├── lib/
│   │   └── utils.ts         # cn関数
│   └── hooks/               # カスタムフック
├── components.json          # shadcn/ui 設定
├── next.config.ts
└── postcss.config.mjs       # Tailwind v4用設定

Step 3: Tailwind CSS v4 のセットアップ

Tailwind CSS v4 では tailwind.config.js が廃止され、CSSファーストの設定に移行しています。

postcss.config.mjs
tailwindcss プラグインではなく @tailwindcss/postcss を使用します。

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

src/app/globals.css
Tailwindのインポートは @import "tailwindcss"; の1行のみで完了します。

@import "tailwindcss";
@import "tw-animate-css";

/* ダークモードのカスタムバリアント定義 */
@custom-variant dark (&:is(.dark *));

Step 4: デザイントークン (カラーシステム)

Tailwind v4 の新機能 @theme inline を使用して、CSS変数をTailwindのユーティリティクラスにマッピングします。カラーパレットには人間の知覚に近い OKLCH色空間 を採用します。

src/app/globals.css

:root {
  --background: oklch(0.2925 0.0157 264.3);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  /* ...その他の変数定義 */
}

.dark {
  --background: oklch(0.2925 0.0157 264.3);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  /* ...その他の変数定義 */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-mono: var(--font-plex-mono);
  --color-primary: var(--primary);
  /* ...その他のマッピング */
}

Step 5: フォントの設定

next/font/google を使用してフォントを最適化します。

UI用: Inter
コード用: IBM Plex Mono

src/app/layout.tsx

import { IBM_Plex_Mono, Inter } from "next/font/google";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

const plexMono = IBM_Plex_Mono({
  variable: "--font-plex-mono",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.variable} ${plexMono.variable} antialiased`}>
        {/* ... */}
      </body>
    </html>
  );
}

Step 6: ダークモードの実装

next-themes を導入し、クラスベースでのテーマ切り替えを実装します。

npm install next-themes

src/components/theme-provider.tsx

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

src/app/layout.tsx
作成したプロバイダーでアプリケーションをラップします。

<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange>
  {children}
</ThemeProvider>

Step 7: shadcn/ui のセットアップ

高品質なUIコンポーネント集である shadcn/ui を初期化します。

npx shadcn@latest init

components.json の設定

Style: `new-york`
Base Color: `neutral`
CSS Variables: `yes`

初期化後、必要なコンポーネント（Button, Dialog, ScrollAreaなど）を一括で追加します。本プロジェクトでは最終的に50個以上のコンポーネントを使用します。

npx shadcn@latest add --all

Step 8: ユーティリティ設定

shadcn/ui で使用される cn 関数（クラス名の結合・競合解決）を確認します。

src/lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Step 9: ベーススタイルの調整

src/app/globals.css にベーススタイルを追加し、アプリ全体の挙動を整えます。

@layer base {

  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground select-none; /* テキスト選択を無効化してアプリライクに */
  }
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
  @apply w-2.5 h-2.5;
}
::-webkit-scrollbar-track {
  @apply bg-transparent;
}
::-webkit-scrollbar-thumb {
  @apply rounded-full bg-border border border-transparent border-solid bg-clip-padding;
}