# 创建 Next.js 项目

npx create-next-app@latest edge-guestbook

# 进入项目目录

cd edge-guestbook

# 安装 Turso 的 libSQL 客户端

npm install @libsql/client

# 安装 Turso CLI

curl -sSfL https://get.tur.so/install.sh | bash

# 登录

turso auth login

# 创建数据库

turso db create guestbook-db

# 获取连接 URL（后面配环境变量要用）

turso db show guestbook-db --url

# 输出示例: libsql://guestbook-db-<your-name>.turso.io

# 创建鉴权 Token

turso db tokens create guestbook-db

turso db shell guestbook-db

CREATE TABLE messages (

  id INTEGER PRIMARY KEY AUTOINCREMENT,

  username TEXT NOT NULL,

  content TEXT NOT NULL,

  created_at DATETIME DEFAULT CURRENT_TIMESTAMP

);

.quit

import { createClient } from '@libsql/client/http';

import { NextResponse } from 'next/server';

const client = createClient({

  url: process.env.TURSO_DATABASE_URL!,

  authToken: process.env.TURSO_AUTH_TOKEN!,

});

export async function GET() {

  try {

    const result = await client.execute('SELECT * FROM messages ORDER BY created_at DESC');

    return NextResponse.json(result.rows);

  } catch (error) {

    console.error('Database query failed:', error);

    return NextResponse.json({ error: 'Failed to fetch messages' }, { status: 500 });

  }

}

export async function POST(request: Request) {

  try {

    const { username, content } = await request.json();

    await client.execute({

      sql: 'INSERT INTO messages (username, content) VALUES (?, ?)',

      args: [username, content],

    });

    return NextResponse.json({ success: true }, { status: 201 });

  } catch (error) {

    console.error('Insert failed:', error);

    return NextResponse.json({ error: 'Failed to post message' }, { status: 500 });

  }

}

'use client';

import { useState, useEffect } from 'react';

interface Message {

  id: number;

  username: string;

  content: string;

  created_at: string;

}

export default function Home() {

  const [messages, setMessages] = useState<Message[]>([]);

  const [username, setUsername] = useState('');

  const [content, setContent] = useState('');

  useEffect(() => {

    fetch('/api/messages')

      .then((res) => res.json())

      .then((data) => setMessages(data));

  }, []);

  const handleSubmit = async (e: React.FormEvent) => {

    e.preventDefault();

    if (!username || !content) return;

    const res = await fetch('/api/messages', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ username, content }),

    });

    if (res.ok) {

      setContent('');

      const updatedMsgs = await (await fetch('/api/messages')).json();

      setMessages(updatedMsgs);

    }

  };

  return (

    <main className="max-w-2xl mx-auto p-6">

      <h1 className="text-3xl font-bold mb-8">边缘留言板</h1>

      <form onSubmit={handleSubmit} className="mb-8 space-y-4">

        <input

          type="text"

          placeholder="你的名字"

          value={username}

          onChange={(e) => setUsername(e.target.value)}

          className="w-full p-2 border rounded"

        />

        <textarea

          placeholder="写下你的留言..."

          value={content}

          onChange={(e) => setContent(e.target.value)}

          className="w-full p-2 border rounded"

        />

        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">

          提交留言

        </button>

      </form>

      <div className="space-y-4">

        {messages.map((msg) => (

          <div key={msg.id} className="border p-4 rounded shadow-sm">

            <p className="font-semibold">{msg.username}</p>

            <p>{msg.content}</p>

            <p className="text-sm text-gray-500 mt-2">{msg.created_at}</p>

          </div>

        ))}

      </div>

    </main>

  );

}

TURSO_DATABASE_URL="你的_TURSO_URL"

TURSO_AUTH_TOKEN="你的_TURSO_TOKEN"

git init

git add .

git commit -m "Initial commit: Vercel + Turso stack"

git remote add origin https://github.com/your-username/edge-guestbook.git

git push -u origin main