AI原生前端开发（038）：AI辅助的Next.js 15全栈开发

前言

Next.js 15是强大的全栈框架！AI可以帮我们快速开发Next.js应用！

1. Next.js 15 App Router开发

1.1 页面与布局

tsx 复制代码

// app/layout.tsx
import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'AI驱动的应用',
  description: '使用Next.js 15和AI构建的应用',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className="min-h-screen bg-gray-50">
        <header className="bg-white shadow-sm p-4">
          <h1 className="text-xl font-bold">AI应用</h1>
        </header>
        <main className="container mx-auto p-4">
          {children}
        </main>
      </body>
    </html>
  );
}

// app/page.tsx
import Link from 'next/link';

export default function Home() {
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold">欢迎来到AI应用</h2>
      <div className="grid md:grid-cols-2 gap-4">
        <Link 
          href="/products"
          className="p-4 border rounded-lg hover:shadow-md"
        >
          <h3 className="font-bold">产品列表</h3>
          <p className="text-gray-600">查看所有产品</p>
        </Link>
        <Link 
          href="/about"
          className="p-4 border rounded-lg hover:shadow-md"
        >
          <h3 className="font-bold">关于我们</h3>
          <p className="text-gray-600">了解更多</p>
        </Link>
      </div>
    </div>
  );
}

1.2 Server Actions

tsx 复制代码

// app/products/page.tsx
import ProductList from './ProductList';

export default function ProductsPage() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">产品列表</h2>
      <ProductList />
    </div>
  );
}

// app/products/ProductList.tsx
'use client';

import { useState, useOptimistic } from 'react';
import { deleteProduct, addProduct } from './actions';

interface Product {
  id: string;
  name: string;
  price: number;
}

export default function ProductList() {
  const [products, setProducts] = useState<Product[]>([
    { id: '1', name: '产品A', price: 100 },
    { id: '2', name: '产品B', price: 200 }
  ]);
  const [optimisticProducts, setOptimisticProducts] = useOptimistic(products);

  const handleDelete = async (id: string) => {
    setOptimisticProducts(prev => prev.filter(p => p.id !== id));
    await deleteProduct(id);
    setProducts(prev => prev.filter(p => p.id !== id));
  };

  return (
    <div className="space-y-4">
      {optimisticProducts.map(product => (
        <div key={product.id} className="p-4 border rounded flex justify-between">
          <div>
            <h3 className="font-bold">{product.name}</h3>
            <p className="text-gray-600">¥{product.price}</p>
          </div>
          <button
            onClick={() => handleDelete(product.id)}
            className="px-3 py-1 bg-red-500 text-white rounded"
          >
            删除
          </button>
        </div>
      ))}
    </div>
  );
}

// app/products/actions.ts
'use server';

export async function deleteProduct(id: string) {
  // 模拟数据库删除
  await new Promise(resolve => setTimeout(resolve, 500));
  console.log('Deleted product:', id);
}

export async function addProduct(data: { name: string; price: number }) {
  await new Promise(resolve => setTimeout(resolve, 500));
  console.log('Added product:', data);
  return { id: Date.now().toString(), ...data };
}

2. 今日小结

这一篇我们学习了：

Next.js 15 App Router
Server Actions

3. 下篇预告

下一篇，我们学习 AI辅助的Nuxt 4全栈开发！