Aller au contenu principal

Next.js avec Cursor : Développement full-stack assisté par l'IA

Cursor Next.js Development

Next.js est le framework le plus populaire pour construire des applications React full-stack, et les capacités IA de Cursor peuvent accélérer la configuration du routage, la création d'endpoints API et la configuration du déploiement. Ce guide couvre le développement Next.js 14+ avec Cursor.

Prérequis​

Avant de commencer :

  • Cursor installé (dernière version recommandée)
  • Node.js 18.17 ou supérieur installé
  • Familiarité avec React et TypeScript

Configuration du projet​

Création d'un projet Next.js​

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

Configuration Next.js de Cursor​

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

Workflow App Router​

Structure des fichiers​

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

Génération de routes avec l'IA​

Crée une structure de routes Next.js avec :
- Page d'accueil publique
- Routes dashboard protégées
- Routes d'authentification (login/register)
- Routes API pour le CRUD utilisateur

Server Components​

// 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>
  );
}

Routes API​

Route Handlers​

// 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​

// 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*'],
};

Patterns de récupération de données​

Server Components​

// Récupération directe côté serveur
async function UserProfile({ id }: { id: string }) {
  const user = await db.user.findUnique({ where: { id } });
  return <div>{user.name}</div>;
}

Client Components​

'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>
  );
}

Optimisation du déploiement​

next.config.js​

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

module.exports = nextConfig;

Ressources connexes​

Dernière mise à jour : Juillet 2025