Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式

這篇是學習Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式課程的紀錄，

課程上有使用到以下工具

OpenAI 的 GPT 在應用程式中實現 AI 生成的內容
Auth0 驗證 Next JS 應用程式
Tailwind CSS 設計 Next JS 應用程式
MongoDB 儲存 Next JS 應用程式的資料
Stripe 向客戶收費

其中發現台灣沒辦法使用 Stripe 收費這邊比較困擾一點，另外其他功能都有成功設定。

第一堂課程

課程教學Github: https://github.com/tomphill/blog-standard-course
React基礎課程: https://youtu.be/HVFSgIVXcD4
第一堂Github連結: https://github.com/tomphill/nextjs-openai-starter
課程連結: https://www.udemy.com/course/next-js-ai/learn/lecture/36192386?LSNPUBID=BoHFIyu6APU&components=add_to_cart%2Cavailable_coupons%2Cbase_purchase_section%2Cbuy_button%2Cbuy_for_team%2Ccacheable_buy_button%2Ccacheable_deal_badge%2Ccacheable_discount_expiration%2Ccacheable_price_text%2Ccacheable_purchase_text%2Ccurated_for_ufb_notice_context%2Ccurriculum_context%2Cdeal_badge%2Cdiscount_expiration%2Cgift_this_course%2Cincentives%2Cinstructor_links%2Clifetime_access_context%2Cmoney_back_guarantee%2Cprice_text%2Cpurchase_tabs_context%2Cpurchase%2Crecommendation%2Credeem_coupon%2Csidebar_container%2Cpurchase_body_container&ranEAID=BoHFIyu6APU&ranMID=39197&ranSiteID=BoHFIyu6APU-xOeQldV1zZ53.eDHqBvJfQ&utm_medium=udemyads&utm_source=aff-campaign#reviews

auth0 設定

設定 auth0 API

產生 AUTH0_SECRET 方式

1	openssl rand -hex 32

調整.env.local 設定檔案如下

AUTH0_SECRET=<AUTH0_SECRET>
AUTH0_BASE_URL=<AUTH0_BASE_URL>
AUTH0_ISSUER_BASE_URL=<AUTH0_ISSUER_BASE_URL>
AUTH0_CLIENT_ID=<AUTH0_CLIENT_ID>
AUTH0_CLIENT_SECRET=<AUTH0_CLIENT_SECRET>

新增 Application URI 設定

設定auth0 登入身分驗證頁面

新增 pages/api/auth/[…auth0].js

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

調整 pages/index.js 檔案

import Link from 'next/link'
export default function Home() {
  return (
    <div>
      <h1>this is the homepage</h1>
      <div>
        <Link href="/api/auth/login">Login</Link>
      </div>
    </div>
  );
}

執行 npm run dev 後打開 http://localhost:3001/

點擊login 後可以看到身分驗證畫面

註冊頁面

詢問授權

設定頁面必須要登入才能瀏覽

舉例來說 pages/post/new.js 檔案內容:

import { withPageAuthRequired } from "@auth0/nextjs-auth0";

export default function NewPost(props){
    console.log('New Post Props:',props);
    return (
        <div>
            <h1>
                this is the new post page
            </h1>
        </div>
    );
}

export const getServerSideProps = withPageAuthRequired(() => {
    return {
        props:{},
    };
});

這邊的 withPageAuthRequired 就是限定使用者一定要登入才能看到這一頁的內容

repo紀錄: https://github.com/gahgah147/nextjs-openai-starter/tree/Day1-Auth0%E7%99%BB%E5%85%A5%E9%A9%97%E8%AD%89

透過Tailwind CSS設定外觀

https://tailwindcss.com/

Tailwind CSS 新手上路：概念、安裝與工具推薦

Tailwind CSS 是一個採用了「Utility First」理念的 CSS 框架。

練習Repo: https://github.com/gahgah147/nextjs-openai-starter/tree/Day2-%E9%80%8F%E9%81%8ETailwind-CSS%E8%A8%AD%E5%AE%9A%E5%A4%96%E8%A7%80

透過 OpenAI’s GPT API 自動產生Blog 文章

首先到 Openai 平台

https://platform.openai.com/

登入後可以點選 Usage 查看用量

像是這樣就是用完了

這樣是還有用量可以使用

產生 API Keys

點選 API keys 後點擊 Create new secret key 按鈕

這邊可以設定API key的名稱

成功產生API KEY

設定環境變數

修改 .env.local 檔新增以下內容

1	OPENAI_API_KEY=<剛剛產生的 API KEY>

安裝 react-markdown套件

1	npm i react-markdown

在程式碼中引用
例如:postContent 是 markdown 的內容


import Markdown from "react-markdown";

...
<Markdown>
    {postContent}
</Markdown>
...

設定MongoDB

https://www.mongodb.com/atlas/database

註冊後登入

https://cloud.mongodb.com/v2/64a3c968e3797d3fc1796726#/clusters

設定IP ADDRESS

因為一開始如果沒有設定IP Address會無法連線到
點選 Network Access

點選 ADD IP ADDRESS

選擇 ALLOW ACCESS FROM ANYWHERE

創建資料庫

點選DataBase

建立新的資料庫

再新增一個posts table

點選 Connect

產生使用者

設定選擇 Connect to your application

複製這段程式碼

修改 .env.local 檔案新增以下這一行

1	MONGODB_URI=mongodb+srv://user:<password>@cluster0.biiwahu.mongodb.net/?retryWrites=true&w=majority

這樣就能成功建立連線

設定 Stripe 收費功能

:::warning
這邊我發現一個問題 Stripe並不支援在台灣開立商戶帳戶
:::

https://stripe.com/

登入後創建帳號

點選開發人員 > API 密鑰複製 Secret key

修改 .env.local 檔案

1	STRIPE_SECRET_KEY=<剛剛的Secret key>

點選添加產品

新增一個 10 tokens 的產品

複製這邊的 API ID

修改 .env.local 檔案

1	STRIPE_PRODUCT_PRICE_ID=<API ID>

設定Webhooks

點選 Webhooks

點擊在本地環境中測試

下載CLI
這邊後來是選擇用apt 下載
Add Stripe CLI’s GPG key to the apt sources keyring:

1	curl -s https://packages.stripe.dev/api/security/keypair/stripe-cli-gpg/public \| gpg --dearmor \| sudo tee /usr/share/keyrings/stripe.gpg

Add CLI’s apt repository to the apt sources list:

1	echo "deb [signed-by=/usr/share/keyrings/stripe.gpg] https://packages.stripe.dev/stripe-cli-debian-local stable main" \| sudo tee -a /etc/apt/sources.list.d/stripe.list

Update the package list: