Cursor Next.js：フルスタック AI 支援開発

Next.js はフルスタック React アプリケーションを構築するための最も人気のあるフレームワークであり、Cursor の AI 機能はルーティング設定、API エンドポイントの作成、デプロイメント設定を加速できます。このガイドでは、Cursor を使用した Next.js 14+ の開発について説明します。

前提条件

開始する前に：

• Cursor をインストール（最新バージョンを推奨）
• Node.js 18.17 以上をインストール
• React と TypeScript に精通していること

プロジェクトのセットアップ

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

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

Cursor の Next.js 設定

// .vscode/settings.json
{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

App Router ワークフロー

ファイル構造

app/
  (auth)/
    login/
      page.tsx
    register/
      page.tsx
  api/
    users/
      route.ts
  dashboard/
    page.tsx
    layout.tsx
    loading.tsx
    error.tsx
  layout.tsx
  page.tsx
  globals.css

AI を使用したルートの生成

以下を含む Next.js ルート構造を作成してください：
- 公開ホームページ
- 保護されたダッシュボードルート
- 認証ルート (login/register)
- ユーザー CRUD 用の API ルート

サーバーコンポーネント

// app/users/page.tsx
async function getUsers() {
  const res = await fetch('https://api.example.com/users', {
    next: { revalidate: 3600 },
  });
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

API ルート

ルートハンドラー

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.user.findMany();
  return NextResponse.json({ users });
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return NextResponse.json({ user }, { status: 201 });
}

ミドルウェア

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*'],
};

データフェッチパターン

サーバーコンポーネント

// サーバー側で直接フェッチ
async function UserProfile({ id }: { id: string }) {
  const user = await db.user.findUnique({ where: { id } });
  return <div>{user.name}</div>;
}

クライアントコンポーネント

'use client';

import { useState, useEffect } from 'react';

export function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data.users));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

デプロイメント最適化

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

関連リソース

• Cursor TypeScript ガイド
• Cursor データベースガイド

最終更新：2025 年 7 月