我的第一个 Next.js + ChatGPT 项目，24 小时内爆炸 10000 用户！
首发于公众号 前端从进阶到入院，欢迎关注。
Hi，大家好我是 ssh，这两天冲浪的时候，我发现了一个特别有意思的项目Linkedin Post Generator ，作者发现他每天需要花大量的时间来写 Linkedin 帖子，所以想利用 chatGPT 帮他检测、优化这些破事儿，简单来说：
只需要把你自己写的小段落输进去，chatGPT 就会自动帮你润色成一篇网红贴！
我自己试用了一下，帮 Dan 写了一篇求职信：
嘿，还真有那么点意思。这个图里的中英文混排是因为我用了「沉浸式翻译」这个 Chrome 插件，很好用。
正巧，他本人写了一篇文章来介绍他使用 Next.js 和 ChatGPT 构建这个应用的心路历程，发布了 如何使用 ChatGPT 和 Next.js 构建我的第一个开源项目：24 小时内获得 10,000 用户，我来整理翻译给大家：
正文
小小介绍一下，我以前从来没有编程过，对我来说，编程看起来非常难，但在两个月前，我决定现在就开始
我的朋友建议我从开源项目开始，并在设置的第一步中帮助我进行了一些简单的指导。
我几乎在每一步中都使用了 ChatGPT，包括弄清楚如何设置某些东西，安装、连接 API，以及代码的含义、如何重写函数或更改大小。
现在我要更详细地介绍我建立的第一个项目。
我从 🥚 变成 🐥
🥚 第 1 步：设置环境 🥚 第 2 步：寻找开源项目并在其基础上构建 🐣 第 3 步：弄清楚代码 🐣 第 4 步：构建项目 🐥 第 5 步：推送项目 🐥 第 6 步：在社交平台上分享（此处显示统计信息）
我花了一个星期的时间弄清楚了一切，启动了该项目。从准备工作开始（很快，只需要 1-2 小时）。然后管理开源项目中的现有代码（3-4 天）。最后将其推送到 GitHub 和 Vercel（花了一天的时间）。
我建立的项目是什么？
Linkedin 帖子生成器 - 用于在 LinkedIn 上通过 AI 生成帖子。www.postgenerator.app
在 GitHub 上github.com/shnai0/link… 使用它来构建您自己的帖子生成器。 👀 来 fork 和 star 吧 :)
为什么要做 LinkedIn 帖子生成器？
首先，我在 LinkedIn 平台上进行了一段时间的实验。
我花了很多时间在 LinkedIn 上撰写帖子，每篇至少需要花费 1 个小时，所以我在思考是否有捷径可走。🤯
因此，我分析了 100 多位不同的创作者和 300 多个不同的提示，以找到更快生成更有效帖子的方法。
现在，我将逐步分享我所做的基本步骤。
🥚 第 1 步：设置环境
设置 Tea
在开始之前，我朋友告诉我设置一个包管理器（如 Tea）来处理开发环境。
在这个时候，“包管理器”这个词对我来说还是未知的。
sh <(curl https://tea.xyz)
# --- 或者 ---
# 使用 brew
brew install tea
据我了解，Tea 帮助安装了我在开发中所需的 node、npm、vercel 和其他任何包等一揽子服务。
使用 TypeScript 和 Tailwindcss 设置 Next.js
我基本了解到我需要某种前端工具。
别人告诉我，可以创建一个新的 Next.js 项目来开始。并且使用 TypeScript 和 Tailwind CSS，所以我按照以下步骤进行操作：
npx create-next-app
# ---
# 你将会被问到以下提示信息
What is your project named? my-app
Would you like to add TypeScript with this project? Y/N
# 选择 `Y` 来添加 TypeScript
Would you like to use ESLint with this project? Y/N
# 选择 `Y` 来使用 ESLint
Would you like to use Tailwind CSS with this project? Y/N
# 选择 `Y` 来使用 Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# 选择 `N` 来使用 `src/` 目录
What import alias would you like configured? `@/*`
# 输入 `@/*` 作为导入别名
🥚 第 2 步：找到开源项目并在其基础上进行构建
我使用了两个开源项目：
- Twitter 算法 github.com/coryetzkorn… ，这样我可以根据 LinkedIn 的算法评价用户输入的帖子。
- Twitter Bio 生成器 github.com/Nutlope/twi…，这个项目帮助我弄清楚如何连接 OpenAI 并生成适用于 LinkedIn 的帖子。在当前代码中，它生成了 BIO。
为了单独研究每个项目，我把 zip 文件下载下来了。
🐣 第 3 步：弄清楚代码
刚开始，我对所见到的东西感到震惊，一无所知。
于是，我问 ChatGPT 应用的基本结构。
我将每个页面的代码复制到 ChatGPT 中，并询问它的功能，基本上是询问如何进行更改。这样我开始对应用程序的前端和 CSS 的位置有了更好的了解。
我仍不完全了解所有的东西，但我认为这样的学习效率确实很高。
我向 ChatGPT 提了一些很愚蠢的问题，当然现在对我来说都很清晰了。
🐣 第 4 步：构建项目
在搞定了一些基础知识后，我开始自己改项目，构建应用程序了。
由两个部分组成：排名和生成器。
LinkedIn 帖子生成器算法
排名是根据不同的标准对您的帖子进行排名，以提高性能。
我根据 LinkedIn 已知的算法进行了适应，使用了以下函数：
- 检测多个 hashtags 的函数
- 检测帖子中的图像或视频的函数
- 检测帖子中的 URL 的函数
- 偏爱使用表情符号的帖子的函数
- 推广负面内容的函数
- 优先考虑换行符的帖子格式的函数
- 减少行长度的函数
- 提出问题的函数
和 Twitter 算法不一样，LinkedIn 的算法不是公开的。
// 检测多个标签的函数
function multipleHashtags({ post }: PostData): Rank {
const regex = /#[\w-]+/g;
const hashtags = post.match(regex);
const lowerCasePost = post.toLowerCase();
if (hashtags && hashtags.length > 3) {
return {
score: 0.5,
message: "使用了太多的标签。",
};
}
if (hashtags && hashtags.length <= 3) {
if (
lowerCasePost.includes("#follow") ||
lowerCasePost.includes("#comment") ||
lowerCasePost.includes("#like")
) {
return {
score: 0.5,
message: "避免使用类似“follow”、“comment”或“like”的标签。",
};
}
return {
score: 1,
message: "结合一般性和特定性的标签。",
};
}
return {
score: 1.0,
};
}
// 检测帖子中是否有图像或视频的函数
function imageVideoBoost({ postMedia }: PostData): Rank {
const has_media = postMedia;
if (has_media) {
return {
score: 2.0,
// message: "包含图像或视频。",
};
}
return {
score: 1.0,
};
}
// 检测帖子中的网址的函数
function postHasUrl({ post }: PostData): Rank {
const regex =
/https?:\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/g;
const urls = post.match(regex);
if (urls && urls.length > 0) {
return {
score: 0.5,
message: "从帖子中删除链接并在评论中添加链接。",
};
}
return {
score: 1.0,
};
}
/**
* 偏好使用表情符号的帖子的函数
*/
function emojis({ post, sentiment }: PostData): Rank {
const regex = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]", "g");
const emojis = post.match(regex) || [];
const totalMatches = emojis.length;
if (totalMatches > 0) {
return {
score: 1.5,
// message: `在帖子中包含了${totalMatches}个表情符号。`,
};
}
return {
score: 1,
message: "帖子中没有找到表情符号。",
type: "negative"
};
}
/**
* 促进消极内容，因为它更有可能传播。
* 隐藏任何积极或令人振奋的内容。
*/
function sentiment({ post, sentiment }: PostData): Rank {
if (sentiment.comparative >= 0.5) {
if (sentiment.comparative > 1.5) {
return {
score: 1.5,
// message: "极其积极。",
};
} else {
return {
score: 1.1,
// message: "积极情感。",
};
}
} else if (sentiment.comparative <= -0.5) {
if (sentiment.comparative < -1.5) {
return {
score: 0.5,
// message: "极其消极。",
};
} else {
return {
score: 0.9,
// message: "消极情感。",
};
}
} else {
return {
score: 1,
};
}
}
/**
* 优先考虑帖子格式的断行。
*/
function lineBreaks({ post, sentiment }: PostData): Rank {
const breaks = post.split(/\n\s*\n/);
const totalBreaks = breaks.length - 1;
if (totalBreaks >= 1) {
return {
score: 1.5,
// message: `使用了${totalBreaks}个断行。`,
};
} else {
return {
score: 1,
message: "在行之间添加断行。",
type: "negative"
};
}
}
/**
* 减少行长度
*/
function lineLength({ post }: PostData): Rank {
const lines = post.split('\n');
let score = 1.0;
for (let i = 0; i < lines.length; i++) {
if (lines[i].length > 200) {
return {
score: 0.9,
message: "缩短行长度以提高可读性（200个字符）。",
};
}
}
return {
score: 1,
// message: "很好，保持行长度在200个字符或以下。",
type: "positive"
};
}
/**
* 提问的函数
*/
function questions({ post, sentiment }: PostData): Rank {
if (post.includes("?")) {
return {
score: 1.5,
// message: "很棒！问题可以帮助激活讨论"
};
} else {
return {
score: 1,
message: "添加问题以激活讨论",
type: "negative"
};
}
}
算法的 UI 界面
检测上述代码中的所有函数，并对其中一些函数展示改进建议。我没有针对所有函数进行调整。
return (
<>
<div>
<div className="slider bg-gray-300 h-4 rounded-full relative overflow-hidden">
<div
className={classNames(
"absolute top-0 transition-width duration-250 ease-linear h-20",
sliderColor
)}
style={{ width: percentage }}
/>
</div>
{/* <p className="explanation text-gray-600 italic text-sm mt-2">
Positive rankings result in greater reach
</p> */}
<ul className="mt-5 p-0">
{positive.map((item, index) => (
<li
className="positive text-green-600 flex items-center space-x-2 list-style-none my-5 text-sm"
key={`positive-${index}`}
>
<span>👍</span>
<span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>
</li>
))}
{negative.map((item, index) => (
<li
className="negative text-red-600 flex items-center space-x-2 list-style-none my-1 text-sm"
key={`negative-${index}`}
>
<span>👎</span>
<span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>
</li>
))}
</ul>
</div>
<style jsx>{`
.slider:after {
content: " ";
display: block;
width: 2px;
height: 20px;
position: absolute;
top: 0;
left: calc(25% - 1px);
background: #000;
}
`}</style>
</>
);
};
帖子中的每个函数都被检测，并根据其得分显示相应的信息。正向的建议带有 👍 图标，而负向的建议带有 👎 图标。
Open AI Api 和 Prompts 生成
我使用了 Prompt 来生成这篇帖子。还有类型的过滤器，所以我根据类型有 5 个不同的提示。我只是连接了我的 OpenAI API。
const handlePrompt = () => {
let prompt;
switch (vibe) {
下面是 Prompt 的内容：
prompt = `Generate post using this prompt, based on ${post}. You are a LinkedinGPT, a large language model that generates viral posts for Linkedin. You are given a prompt of a post and must generate a post that is more likely to be liked and reposted than the original post.
The Linkedin algorithm contains boosts and demotions based on what you are writing. Positive boosts are:
- in each post add emoji
- 200 characters in sentence maximum
- Start each sentecnce from new line and ad numbers in first 2 lines
- add 3 hashtags which 2 are generic and one very specific (at the end) Tags relate to post theme
- add a question at the end of the post to start a discussion. Before the hashtags
- first two lines should be catchy
- Dont add links - links are not good.
- If post copied in the field contain some numbers keep them the same.
Add idea about which image or visual can be added at the end of the post (this text is not counted as part of post)
${post}
---
Generated post length must be more than 800-1200 characters
---
Between each line must be a space
---
Keep all mentions of people in there
---
Start the firs line from smth like: I did smth, In year, I do, Tired of, Sometimes it is just, A path toward, Because this is not,I've been struggling, (change the begginign depends on the context )
---
Add emoji if it fits
---
It should be a story`;
生成器主界面
这是我的索引文件，是帖子生成器的主要界面。
<main>
<nav className="bg-blue-900 text-white ">
<div className="px-5">
<div className="max-w-5xl mx-auto">
<div className="flex justify-between items-center h-16 ">
<div className="flex items-center text-base ">
<a
target="_blank"
href="https://www.linkedin.com/in/iuliia-shnai/"
rel="noreferrer"
className="text-white flex max-w-fit items-center justify-center space-x-2 text-xl"
>
<p>👩💼</p>
</a>
</div>
</div>
</div>
</div>
</nav>
<section className="py-10 lg:py-20 ">
{/* bg-[url('/image1.svg')] */}
<div className="px-4">
<div className="max-w-5xl mx-auto">
<div className="w-full mx-auto">
<h1 className="text-6xl text-center font-bold pb-1 text-slate-900">
Linkedin Post Generator 🚀
</h1>
<p className="mt-3 mb-10 text-center">
See how your post performs and generate a better one with AI. Time
to go viral. <br />
</p>
<div className="flex flex-col md:flex-row w-full md:space-x-20">
<div className="flex md:w-1/2 flex-col">
<h2
className="
text-xl font-bold"
>
Your Ranking
</h2>
<div className="pt-1">
<Ranking ranking={ranking} />
</div>
<div className="w-full my-1 mx-auto">
<Post
post={post}
setPost={setPost}
media={media}
setMedia={setMedia}
/>
</div>
<div className="flex mb-5 items-center space-x-3"></div>
<div className="block">
<DropDown vibe={vibe} setVibe={setVibe} />
</div>
<div className="my-4">
<button
disabled={loading}
onClick={(e) => optimizePost(e)}
className="bg-blue-800 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800"
>
{loading && <LoadingDots color="white" style="large" />}
{!loading && `Generate new post `}
</button>
</div>
</div>
<div className="flex md:w-1/2 md:flex-col">
<Toaster
position="top-right"
reverseOrder={false}
toastOptions={{ duration: 2000 }}
/>
{optimizedPost && (
<div className="my-1">
<div className="flex justify-between items-center pb-2 border-b border-gray-300">
<h2 className="text-xl font-bold">Your Generated Post</h2>
</div>
<div className="max-w-2xl my-4 mx-auto">
<div
className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy border"
onClick={() => {
navigator.clipboard.write([
new ClipboardItem({
"text/html": new Blob([optimizedPost], {
type: "text/html",
}),
}),
]);
toast("Post copied to clipboard", {
icon: "📋",
});
}}
key={optimizedPost}
>
<p
className="text-black-700"
dangerouslySetInnerHTML={{ __html: optimizedPost }}
/>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</section>
<div className="max-w-5xl mx-auto">
<Footer />
</div>
</main>
🐥 第 5 步：推送项目
最后一步，我准备好推送了。
我在 GitHub 上创建了一个仓库：
$ git remote add origin ..
git branch -M main
git push -u origin main
然后，我在 Vercel 上创建了一个帐户，以便使用 Vercel 发布并检查错误。
之后的每个更新都通过以下命令进行推送：
git add .
git commit -m “fix type”
git push
为了检查错误，我用了下面的命令，这样我就不会在错误解决之前进行推送。ChatGPT 在帮助我找出错误这方面帮了很大的忙。
npm run build
🐥 第 6 步：在社交媒体上分享并收集反馈
由于这是一个 LinkedIn 项目，我在 LinkedIn 上发布了这篇文章，并且获得了 20 万次的浏览量和一些讨厌者 :)
文章链接： www.linkedin.com/feed/update…
24 小时内的统计数据： ⭐️ 20,000 次 LinkedIn 曝光 ⭐️ 7,000 次网站浏览 ⭐️ 600 个赞 ⭐️ 11,000+ 个生成的帖子 ⭐️ 3+ 个讨厌者 ⭐️ 3+ 个联合项目邀请
为什么我喜欢做这些项目？
我的目标是通过开发微工具和参与有趣的开源项目来提高我的技术技能。我相信通过对真实世界中的问题提供解决方案，我能够学到最多的东西。
这也是为什么我喜欢参加编程挑战和黑客马拉松活动的原因。你可以在我的 GitHub 仓库上找到我的其他项目和一些有趣的代码。
结语
这就是我在构建这个 LinkedIn 帖子生成器时的经验。它不仅仅是一个技术挑战，而且是一个机会来提高自己的技术能力和思考方式。
如果你对构建有趣的开源项目和创造有用的工具感兴趣，我鼓励你尝试一下这个 LinkedIn 帖子生成器。你会从中获得很多乐趣和学习机会。
最后，我要感谢 OpenAI 团队提供了如此强大和有用的 ChatGPT 模型。它是构建这个 LinkedIn 帖子生成器的核心工具。
如果你有任何问题或反馈，请随时在评论中提出。我很愿意与你进行讨论和交流。
祝你在编程旅程中好运！🚀
首发于公众号 前端从进阶到入院，欢迎关注。
转载自:https://juejin.cn/post/7248906639704604733