Cursorの魔法の杖！？ 「.cursorrules」でAI支援開発を加速しよう

こんにちは！今回は、Cursorを使ったNext.jsアプリ開発で役立つ「.cursorrules」について紹介します。AIによるコード補完や提案を使いこなしたい方、必見ですよ！

Cursor - The AI Code Editor

「.cursorrules」って何？

「.cursorrules」は、Cursorというコードエディタで使用する特別な設定ファイルです。このファイルを使うと、プロジェクト固有のルールをAIに教えることができるんです。つまり、あなたのプロジェクトに最適化されたAI支援が受けられるようになるわけです！

どんなメリットがあるの？

1. プロジェクトに最適化されたコード提案

   • 使用している技術スタックに合わせたコードが提案されます。

   • プロジェクト固有の命名規則やコーディングスタイルを守れます。

2. チーム全体での一貫性維持

   • 全員が同じルールに従うので、コードの一貫性が保たれます。

   • 新メンバーも素早くプロジェクトのルールを理解できます。

3. 開発効率アップ

   • よく使うライブラリやメソッドの使い方をAIが提案してくれます。

   • プロジェクト特有の質問にも的確に答えてくれるようになります。

4. 学習コストの削減

   • 新しい技術やベストプラクティスをAIが教えてくれます。

   • コードを書きながら学べるので、効率的にスキルアップできます。

実際にどう書くの？

`.cursorrules`ファイルは、プロジェクトのルートディレクトリに置きます。中身は英語で書くのがおすすめです。AIがより正確に理解できるからです。

以下は、Next.js、Vercel、Supabaseを使ったプロジェクトの例です：

You are an expert in Next.js (App Router), React, TypeScript, Tailwind CSS, Vercel, and Supabase. Provide concise, technically accurate responses.

Project Stack:
- Next.js 14+ with App Router
- TypeScript 5+
- React 18+
- Tailwind CSS for styling
- Vercel for deployment
- Supabase for backend services

Coding Guidelines:
- Write clean, functional TypeScript code
- Use React hooks and functional components
- Implement proper error handling and testing
- Optimize for performance using Next.js features

Vercel and Supabase Integration:
- Use Vercel Analytics and Edge Functions
- Implement Supabase Auth and Row Level Security
- Utilize Supabase realtime subscriptions

Always consider best practices for security, accessibility, and internationalization.

日本語版

あなたはTypeScript、Node.js、Next.jsのApp Router、React、Shadcn UI、Radix UI、Tailwindに関する専門家です。

コードスタイルと構造:
- 簡潔で技術的なTypeScriptコードを書く
- 関数型および宣言型プログラミングパターンを使用し、クラスは避ける
- コードの重複を避け、イテレーションとモジュール化を優先する
- 補助動詞を用いた説明的な変数名を使用する（例：isLoading、hasError）
- ファイル構造：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型

パフォーマンス最適化:
- クライアントコンポーネントをSuspenseでラップし、フォールバックを設定する
- 非重要なコンポーネントには動的読み込みを使用する
- 画像を最適化する：WebPフォーマットを使用し、サイズデータを含め、レイジーローディングを実装する

この設定により、AIはプロジェクトの技術スタックを理解し、それに合わせたアドバイスやコード提案をしてくれます。

使ってみよう！

`.cursorrules`を設定したら、あとは普段通りCursorでコーディングするだけ。AIの提案がより的確になっているのを感じられるはずです。

例えば、Supabaseの認証機能を実装しようとすると、AIが適切なコードスニペットや使い方のヒントを提供してくれるでしょう。Vercelへのデプロイ時の最適化についても、的確なアドバイスが得られるはずです。

まとめ

「.cursorrules」を使えば、AIをあなたの最強の開発パートナーに育てることができます。プロジェクトの進化に合わせて、このファイルも更新していくことをおすすめします。

AIと上手に付き合いながら、効率的な開発ライフを送りましょう！何か質問があれば、コメント欄でお待ちしています。Happy Coding!

参考記事

【Cursor】Next.js開発のおすすめ.cursorrules設定

Cursor Directory

おまけ

以下が、より包括的な.cursorrulesの設定です。