社交媒体已成为人们和企业分享想法、推广产品以及与目标受众建立联系的重要工具。然而，定期发布内容并管理多个平台上的日程安排往往既耗时又重复性较强。
在本教程中，您将学习如何使用Gemini、Late API以及Next.js来构建一个由人工智能驱动的社交媒体发布日程安排工具。
我们将利用Gemini API根据用户提供的提示生成吸引人的社交媒体内容，使用Next.js处理应用程序的前端和后端逻辑，而通过Late API则能够从单一平台将内容发布到多个社交媒体平台上并进行日程安排。
目录
先决条件
要完全理解本教程的内容，您需要具备对React或Next.js的基本了解。
我们将使用以下工具：
-
Late API：这是一个社交媒体API，允许您通过一个统一的界面在13个不同的社交媒体平台上创建和安排发布内容。
-
Next.js：这是一个基于React开发的框架，可用于构建快速且可扩展的Web应用程序，同时能够处理前端和后端逻辑。
-
Google Gemini API：该API允许您利用谷歌的人工智能模型，根据用户提供的提示生成文本及其他内容。
设置与安装
使用以下代码片段创建一个新的 Next.js 项目：
npx create-next-app post-scheduler安装项目所需的依赖项。我们将使用 Day.js 来处理 JavaScript 中的日期相关操作，这样就能更轻松地在指定时间安排并发布社交媒体帖文了。
npm install @google/genai dayjs utc接下来，在 Next.js 项目的根目录下创建一个 .env.local 文件，并在其中输入你的 Gemini API 密钥：
GEMINI_API_KEY=粘贴你的 API 密钥
一旦所有设置完成，你的 Next.js 项目就准备就绪了。现在，让我们开始动手构建吧！🚀
如何使用 Late 安排社交媒体帖文的发布时间
Late 是一个功能齐全的社交媒体日程安排工具，它允许你连接自己的社交媒体账户，并在多个平台上发布帖文。在本节中，你将学习如何使用 Late 的控制面板来创建和安排社交媒体帖文的发布。
首先，创建一个 Late 账户 并登录。
生成一个 API 密钥，并将其添加到 Next.js 项目中的 .env.local 文件中。
LATE_API_KEY=
将你的社交媒体账户连接到 Late，这样你就可以在所有平台上管理和发布帖文了。
通过 OAuth 连接好你的社交媒体账户后，你就可以直接在相应的平台上编写、发布和安排帖文的发布了。
在 Late 的控制面板中，你可以直接编写帖文内容并添加媒体文件。
你可以自行选择内容发布的时机：立即发布、安排在以后发布、将其添加到任务队列中，或者将其保存为草稿。
一旦帖子被发布，你就可以在控制面板中直接查看其状态并预览该帖子。
🎉 恭喜！ 你已经成功使用Late控制面板创建了第一篇帖子。在接下来的章节中，你将学习如何使用Late API直接从你的应用程序中创建和安排帖子的发布时间。
如何构建Next.js应用程序界面
在本节中，你将构建该应用程序的用户界面。该应用程序采用单页路由机制，并通过条件渲染来显示最近的帖子、一个用于输入AI提示语的字段，以及一个允许用户创建或安排帖子发布的表单。
在继续之前，请在你的Next.js项目中创建一个`types.d.ts`文件，然后将以下代码片段复制到该文件中：
interface Post {
_id: string;
content: string;
scheduledFor: string;
status: string;
}
interface AIFormProps {
handleGeneratePost: (e: React.FormEvent<HTMLFormElement>) => void;
useAI: boolean;
setUseAI: React.Dispatch<React.SetStateAction<>boolean>>;
prompt: string;
setPrompt: ReactDispatch<React.SetStateAction<>string>>;
disableBtn: boolean;
}
interface FormProps {
handlePostSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
content: string;
setContent: React.Dispatch<React.SetStateAction<>string>>;
date: string;
setDate: ReactDispatch<React.SetStateAction<>string>>;
disableBtn: boolean;
setUseAI: React.Dispatch<React.SetStateAction<>boolean>>;
useAI: boolean;
}
types.d.ts文件定义了整个应用程序中使用的所有数据结构及类型声明。
将以下代码片段复制到app/page.tsx文件中：
"use client";
import Nav from "./components/Nav";
import { useState } from "react";
import NewPost from "./components/NewPost";
import PostsQueue from "./components/PostsQueue";
export default function Page() {
const [showPostQueue, setShowPostQueue] = useState<boolean>(false;
return (
'w-full h-screen'>
: Page组件会渲染Nav组件，并根据showPostQueue状态的值来条件性地显示PostsQueue或NewPost组件。
创建一个components文件夹，用于存放应用程序中使用的各种页面组件。
cd app
mkdir components && cd components
touch Nav.tsx NewPost.tsx PostElement.tsx PostsQueue.tsx
将以下代码片段添加到Nav.tsx文件中：
export default function Nav({
showPostQueue,
setShowPostQueue,
}: {
showPostQueue: boolean;
setShowPostQueue: React.Dispatch<React.SetStateAction<>boolean>>;
}) {
return (
);
}
将以下代码片段复制到 `PostsQueue.tsx` 文件中：
"use client";
import { useEffect, useState, useCallback } from "react";
import PostElement from "./PostElement";
export default function PostsQueue() const [posts, setPosts] = useState<Post[]>> [];
const [loading, setLoading] = useState<boolean>(true);
return (
<div className='p-4'>
'text-xl font-bold'>>已安排的帖子
{loading ? (
'text-sm'>>正在加载已安排的帖子…</p>
) : (
'mt-4' 0 ? (
posts.map((post) => <PostElement key={post._id} post={post} />>)
) : (
没有可用的已安排帖子。
)}
)}
);
}
PostsQueue.tsx 组件会显示之前创建的帖子列表及其当前状态，表明每篇帖子是已经发布还是被安排在以后发布。在数据加载过程中，会显示加载提示信息；一旦数据加载完成，就会使用 PostElement 组件来渲染每篇帖子。
将以下代码添加到 PostElement.tsx 组件中：
export default function PostElement() {
export const formatReadableTime = (isoString: string) => {
const date = new Date(isoString); // 自动解析为 UTC 格式
return date.toLocaleString(undefined, {
year: "numeric",
month: "short",
day: "numeric",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true, // 若需要 24 小时格式，则将此值设为 false
});
};
return (
'p-4 border flex items-center justify-between space-x-4 rounded mb-2 hover:bg-gray-100 cursor-pointer'>
'font-semibold text-sm'>>{post.content.slice(0, 100)}</p>
"text-blue-400 text-xs">
已安排在：{formatReadableTime(post.scheduledFor)}发布
{post.status}</p>
);
}
最后，将以下代码片段复制到NewPost.tsx文件中：
"use client";
import { useState } from "react";
export default function NewPost() {
const [disableBtn, setDisableBtn] = useState<boolean>(falseconst [useAI, setUseAI] = useState<boolean>(falseconst [content, setContent] = useState<string>("";
const [prompt, setPrompt] = useState<string>(""const [date, setDate] = useState<string>("");
//👇🏻 用于生成帖子内容
const handleGeneratePost = async (e: React.FormEvent<HTMLFormElement>>) =>> {
e.preventDefault();
setDisableBtn(true//👇🏻 用于创建或安排帖子的发布时间
const handlePostSubmit = async (e: React.FormEvent<HTMLFormElement>>) =>> {
e.preventDefault();
};
return (
'w-full p-4 h-[90vh] flex flex-col items-center justify-center border-t'>>
'text-xl font-bold'>>新帖子
{useAI ? (
)}
);
}
NewPost组件会根据用户的选择有条件地显示AIPromptForm或PostForm。当用户选择使用人工智能生成内容时，会显示AIPromptForm来收集所需的信息；一旦内容生成完成，就会显示PostForm，让用户能够编辑、创建或安排帖子的发布时间。
请将以下代码添加到`NewPost.tsx`文件中：
export const AIPromptForm = ({
handleGeneratePost,
useAI,
setUseAI,
prompt,
setPrompt,
disableBtn,
}: AIFormProps) => {
return (