DesignLayer

プロジェクトに必要なもの

最終更新日: 2026年10月16日

Copy for Cursor を渡す前に、Next.js アプリ側に必要な TypeScript、Tailwind、cn ヘルパーを揃える手順。

このページでできること

コピーを貼ったあと、@/lib/utils が見つからない、Tailwind のクラスが効かない、という状態を先に潰します。

必要なもの

  • Next.js の App Router

  • TypeScript

  • Tailwind CSS

  • clsx と tailwind-merge

React と Next.js 自体は、コピーの npm install 行には出てきません。アプリに入っている前提です。

cn を置く

shadcn の cn を @/lib/utils に置きます。パスエイリアス @/ は、tsconfig の paths が指すディレクトリ（多くの場合 src/）です。

bash
npm install clsx tailwind-merge

src/lib/utils.ts

次のファイルを作ります。すでに同じ関数があるなら、新しく足さないでください。

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

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

確認する

アプリのどれか1ファイルで import { cn } from "@/lib/utils" と書き、型エラーが出なければ完了です。

コピー本文は、プロジェクトがこの形でない場合、ファイルを編集する前に足りないものの入れ方をエージェントが説明するよう指示しています。説明だけ返ってきたら、その手順を先に実行してから、もう一度全文を貼ってください。

プロジェクトに必要なもの | DesignLayer