我如何使用 ChatGPT 和 Next.js 构建我的第一个开源项目。24 小时内有 10k 用户

本文链接：https://blog.csdn.net/jascl/article/details/131185491

介绍，我以前从未编码过，这对我来说看起来非常难，2 个月前我决定为什么不现在。🤷‍♀️

我的朋友建议我从开源项目开始，还帮助我完成了最初的简单设置步骤。

我几乎在每一步都使用了 ChatGpt，从弄清楚如何设置、安装、将 API 连接到代码的含义，如何重写函数或更改大小。

现在我要详细介绍一下我构建的第一个项目。

您将在本文中找到什么？

动图

我从🥚进化到🐥

🥚 第 1 步。设置环境🥚 第 2 步。查找
开源项目并在其上构建

我构建的项目是什么？

Linkedin Post Generator - 用于创建为 Linkedin 生成的 AI 的帖子生成器。

https://zhifj.com

在 GitHub 上telegeram1.com

动图

下面我分享了发布第一天并在 LinkedIn 上流行起来的所有统计数据。

为什么使用 Linkedin 帖子生成器？

首先，我在 Linkedin 平台上试验了一段时间。

我花了很多时间在 linkedin 上写帖子，比如每个帖子至少 1 小时，并且正在考虑捷径。🤯

因此，我分析了 100 多个不同的创作者和 300 多个不同的提示，以找到更快地生成更有效的帖子的方法。

所以，在这里我将逐步分享我所做的基础知识。

🥚 第 1 步. 设置环境

摆茶具

在我开始之前，我得到了设置包管理器的建议，比如 tea 来处理开发环境。

🥹 这些词在这一点上仍然是未知的“包管理器”

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install tea

</code></span></span>

当我得到它时，茶会帮助安装 node、npm、vercel 和我开发所需的任何其他包。

所以合而为一。

使用 TypeScript 和 Tailwindcss 设置 Next.js

我有一个基本的了解，即我需要前端。

我被教导从生成一个新的 Next.js 项目开始。同样使用 TypeScript 和 Tailwind CSS，所以请遵循以下步骤：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias
</code></span></span>

🥚 第 2 步。查找开源项目并在此基础上构建

我使用了这两个开源项目：

Twitter Alghoritm GitHub - coryetzkorn/twitter-algorithm: The official Twitter ranking algorithm 所以我可以根据 Linkedin 的算法对用户的帖子输入进行评分。

2.推特生物生成器

https://github.com/Nultlope/twitterbio
这个帮助我弄清楚了如何连接 Open.AI 并用它为 Linkedin 生成帖子。在当前代码中它生成了 BIO

为了分别设置和打开每个项目，我将它们以 zip 格式下载到我的计算机上

🐣 Step.3 弄清楚代码

所以我有点被我所看到的震惊了，一开始我什么都想不通。

所以我做了什么，我向 ChatGPT 询问了我的应用程序的基本结构。

我把里面的每一个页面代码都抄下来，问它是做什么的，基本上就是问怎么修改。所以我开始有了一个更好的主意，应用程序前端在哪里，CSS 在哪里。

我仍然没有完全了解所有内容并且遗漏了这些东西，但我认为这绝对是快速学习。

我向 ChatGPT 提出的一些请求非常基本，现在对我来说真的很清楚，那时我问了所有问题，都是愚蠢的问题。

🐣 Step 4 构建项目

因此，在了解了一些基础知识之后，我继续进行自己的更改。开始在这些项目之上构建应用程序。

它有两部分=排名+生成器

Linkedin 帖子生成器算法

排名是根据不同的标准对您的帖子进行排名，从而提高性能。

我使用以下函数为 Linkedin 已知的内容改编了算法：

检测多个主题标签的功能
检测图像或视频的功能
检测帖子中网址的功能
支持使用表情符号的帖子的功能
宣传负面内容的功能
像后期格式化一样优先中断的功能。
减少行长度的功能
提问功能

与 Twitter 算法相比，Linkedin 并不公开。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
<span style="color:var(--syntax-comment-color)">// function to detect multiple hashtags</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">multipleHashtags</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">regex</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">/#</span><span style="color:var(--syntax-literal-color)">[\w</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">+/g</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">match</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">regex</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">lowerCasePost</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toLowerCase</span><span style="color:var(--syntax-text-color)">();</span>

  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">hashtags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Too many hashtags.`</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">hashtags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)"><=</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#follow</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">||</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#comment</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">||</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#like</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Avoid using hashtags like "follow," "comment," or "like".`</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Combine general and specific hashtags.`</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// function to detect image or video</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">imageVideoBoost</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">postMedia</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">has_media</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">postMedia</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">has_media</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2.0</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-comment-color)">// message: `Contains image or video.`,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>


<span style="color:var(--syntax-comment-color)">// function to detect urls in post</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">postHasUrl</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">regex</span> <span style="color:var(--syntax-error-color)">=</span>
    <span style="color:var(--syntax-string-color)">/https</span><span style="color:var(--syntax-literal-color)">?</span><span style="color:var(--syntax-string-color)">:</span><span style="color:var(--syntax-literal-color)">\/\/[\w</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">(\.[\w</span><span style="color:var(--syntax-string-color)">-</span>