🚀 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 🎉

2025年已经来了，还有什么比开始做一个超棒的Twitter帖子项目更好的方式吗？🎯 在这篇博客中，我将向你展示如何将Gemini API与Next.js集成，并使用TailwindCSS进行样式设定来创建一个简单而有效的帖子展示系统。此外，我们还会用Gemini API密钥来获取并展示帖子。

我们先看看最后的小项目长什么样。

好啦，让我们来试试吧！🔥

此处省略部分内容

开始之前，请确保你已经做好准备。

• 安装了Node.js
• 一个Gemini API密钥（在Gemini设置密钥）
• 熟悉Next.js/React.js 和 TailwindCSS（如果你需要复习或学习Nextjs/Reactjs，可以看看这门课程：）

此处省略内容

首先，创建一个新的 Next.js 项目

运行以下命令来创建一个新的 Next.js 项目并进入项目目录:

命令如下:

npx create-next-app twitter-post
cd twitter-post

全屏模式 退出全屏

现在咱们来安装 Gemini npm 包程序

npm i @google/generative-ai
// 使用npm安装@google/generative-ai插件

进入全屏模式
退出全屏

在根目录下创建一个 .env.local 文件，并在其中加入你的 Gemini API 密钥。

GEMINI_API_KEY=你的API密钥在这里

进入全屏模式，退出全屏模式

在项目中创建app/api/submit/route.ts文件，通过route.ts文件，我们将通过Gemini API获取并展示类似推特的帖子。

    import { GoogleGenerativeAI } from '@google/generative-ai';
    import { NextResponse } from 'next/server';

    const API_KEY = process.env.GEMINI_AI_API_KEY || "";

    export async function POST(req: Request) {
      const { description } = await req.json();

      if (!description) {
        return NextResponse.json(
          { 错误: '描述是必需的。' },
          { status: 400 }
        );
      }

      try {
        const genAI = new GoogleGenerativeAI(API_KEY);
        const model = await genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
        const prompt = `生成推特内容，基于以下描述: ${description}`;
        const result = await model.generateContent([prompt]);

        if (result && result.response) {
          const generatedText = await result.response.text();
          return NextResponse.json({ tweet: generatedText });
        } else {
          throw new Error('模型未返回响应。');
        }
      } catch (error) {
        console.error('生成推文时出错:', error);
        return NextResponse.json({ 错误: '无法生成推文' }, { status: 500 });
      }
    }

切换到全屏模式 切换出全屏模式

上面代码的功能描述是。

• 生成推文： 利用谷歌的AI根据该描述生成推文。
• 错误处理： 若未提供描述或AI出现故障，则返回错误。

• 使用的AI模型： 使用gemini-1.5-flash生成内容。

• • *

这是简单的服务端HTML和Tailwindcss组件：

    import { RiTwitterXLine } from "react-icons/ri";
    import InteractiveForm from "./components/InteractiveForm";

    export default function Home() {
      return (
        <div className="flex flex-col justify-center items-center min-h-screen bg-[#1a1a1a] w-full">
          <RiTwitterXLine size={50} color="white" />
          <div className="flex flex-col justify-center items-center mt-7 w-full max-w-4xl py-3">
            <p className="text-white text-4xl font-extrabold">只需几秒钟，你的想法就能变成推文。</p>
            <p className="text-white text-2xl">Tweet Craft 是你写推文的超级帮手。</p>
            {/* 泰国互动表单组件 */}
            <InteractiveForm />
          </div>
        </div>
      );
    }

点击全屏，开启；点击退出，关闭

处理所有推文的生成、复制和重新生成的主要负责部分是客户端组件——

    'use client';

    import { useState } from 'react';
    import { BsArrowRightCircle } from "react-icons/bs";

    export default function InteractiveForm() {
      const [tweet, setTweet] = useState<string | null>(null);
      const [loading, setLoading] = useState(false);

      const handleSubmit = async (e: any) => {
        e.preventDefault();
        const description = e.target.description.value;
        setLoading(true);

        const response = await fetch('/api/submit', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ description }),
        });

        const result = await response.json();
        setLoading(false);

        if (result.tweet) {
          setTweet(result.tweet);
        } else {
          console.error('错误:', result.error);
        }
      };

      const handleCopy = () => {
        if (tweet) {
          navigator.clipboard.writeText(tweet);
          alert('推文已复制到剪贴板！');
        }
      };

      const handleRegenerate = async () => {
        if (tweet) {
          setLoading(true);
          const description = tweet;
          const response = await fetch('/api/submit', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ description }),
          });

          const result = await response.json();
          setLoading(false);

          if (result.tweet) {
            setTweet(result.tweet);
          }
        }
      };

      return (
        <div className="w-full relative">
          <form onSubmit={handleSubmit} className="w-full">
            <div className="relative">
              <textarea
                id="description"
                name="description"
                rows={10}
                placeholder="写下你的想法在这里..."
                className="
                  block 
                  w-full
                  px-4 
                  py-3 
                  mt-4
                  bg-[#1a1a1a]
                  text-lg
                  border 
                  border-gray-300 
                  text-white
                  rounded-md 
                  focus:outline-none 
                  focus:ring-2 
                  focus:ring-gray-300 
                  focus:border-transparent
                "
              />
              <button
                type="submit"
                className="
                  absolute 
                  bottom-2 
                  right-2 
                  p-2 
                  rounded-full 
                  text-white 
                  bg-transparent 
                  hover:bg-gray-700
                "
                disabled={loading}
              >
                <BsArrowRightCircle size={30} />
              </button>
            </div>
          </form>

          {tweet && (
            <div className="mt-6 text-white">
              <p className="text-lg">{tweet}</p>
              <div className="flex gap-4 mt-4">
                <button
                  onClick={handleCopy}
                  className="px-4 py-2 bg-blue-500 rounded-full text-white hover:bg-blue-400"
                >
                  复制
                </button>
                <button
                  onClick={handleRegenerate}
                  className="px-4 py-2 bg-green-500 rounded-full text-white hover:bg-green-400"
                >
                  重新生成
                </button>
              </div>
            </div>
          )}

          {loading && (
            <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-opacity-50">
              <span className="text-white">生成推文...</span>
            </div>
          )}
        </div>
      );
    }

全屏 退出全屏

你可以轻松地通过 Tailwind 的样式类来调整颜色、间距等设计元素。

现在可以开始运行你的项目了：

    npm run dev

这是用于运行开发服务器的命令，常用于 Node.js 或 npm 包中。npm 是 Node.js 包管理器。

切换到全屏/退出全屏

在你的浏览器中打开 http://localhost:3000，你将会看到类似推特的时间线！🎉

我很期待看到你能用这个项目做出些什么！可以随意 fork 这个仓库，创建 issue，甚至提个 pull request。让我们一起把这个项目做得更强吧！

例如，嵌入推特 API 和添加推荐按钮。

在这里查看 GitHub 项目🚀

Jagroop2001 / tweet-craft

Tweet Craft 是一个由 Next.js 构建的基于 AI 的应用程序，可以根据用户的描述生成推文。利用 Gemini 的 API，该应用让用户可以根据输入轻松创作推文，非常适合需要快速创意社交媒体内容的人。

Tweet Craft 是一个利用 Next.js 构建的 AI 驱动的工具，可以根据用户的描述生成推文。通过使用 Gemini 的 API，该应用程序使用户能够根据输入轻松创建推文，非常适合需要快速且有创意的社交媒体内容的人。视频：https://vimeo.com/1043260556?share=copy

• AI生成推文：用户提供描述之后，应用根据输入生成推文。
• Gemini API整合：应用通过Gemini的API处理自然语言描述并生成推文。

先决条件:

• Node.js (18.0 及以上版本)
• npm 或 yarn (包管理工具)

开始步骤

1. 克隆代码库：使用以下命令：

请在终端中执行以下命令:

在终端中输入以下命令:

git clone https://github.com/Jagroop2001/tweet-craft
切换到(tweet-craft目录)
cd tweet-craft

点击全屏，点击退出全屏

1. 安装依赖：

npm install
或者 
yarn install
# 安装npm依赖或者使用yarn安装依赖

进入全屏 退出全屏

1. 设置你的 Gemini API 密钥：

• 在项目根目录创建一个名为 .env.local 的文件。
• 将您的 Gemini API 钥匙添加到文件内。

GEMINI_AI_API_KEY="你的 Gemini API 密钥"

进入全屏 退出全屏

1. 跑……

在 GitHub 上查看

祝你编程快乐，希望你在2025年过得棒棒的！🎉 让我们一起做出更多的酷炫东西吧！

🚀 保持联系，关注我的旅程！ 🌟

👉 关注我的推特 🐦

👉 来看看我的GitHub 💻