Zum Hauptinhalt springen

Next.js mit Cursor: KI-unterstützte Full-Stack-Entwicklung

Cursor Next.js Development

Next.js ist das beliebteste Framework für den Aufbau von Full-Stack-React-Anwendungen, und die KI-Funktionen von Cursor können die Router-Konfiguration, die Erstellung von API-Endpunkten und die Bereitstellungskonfiguration beschleunigen. Dieser Leitfaden deckt die Next.js 14+-Entwicklung mit Cursor ab.

Voraussetzungen​

Bevor Sie beginnen:

  • Cursor installiert (neueste Version empfohlen)
  • Node.js 18.17 oder höher installiert
  • Vertrautheit mit React und TypeScript

Projekt-Setup​

Next.js-Projekt erstellen​

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

Next.js-Konfiguration für Cursor​

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

App Router-Workflow​

Dateistruktur​

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

Routen mit KI generieren​

Erstelle eine Next.js-Routenstruktur mit:
- Öffentlicher Startseite
- Geschützte Dashboard-Routen
- Authentifizierungsrouten (login/register)
- API-Routen für User-CRUD

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

API-Routen​

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

Datenabruf-Patterns​

Server Components​

// Direkter Abruf auf dem Server
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>
  );
}

Bereitstellungsoptimierung​

next.config.js​

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

module.exports = nextConfig;

Verwandte Ressourcen​

Zuletzt aktualisiert: Juli 2025