# [Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式](https://softnshare.com/next-js-ai/?fbclid=IwAR2pwxtLQNCUgwpeKvYi23Ge1N7Svcmi7h_mgp-jJhs41r4znT9m4Ctq1yg)

# 這篇是學習Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式 課程的紀錄，
課程上有使用到以下工具

1. OpenAI 的 GPT 在應用程式中實現 AI 生成的內容
2. Auth0 驗證 Next JS 應用程式
3. Tailwind CSS 設計 Next JS 應用程式
4. MongoDB 儲存 Next JS 應用程式的資料
5. 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 方式

 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 新手上路：概念、安裝與工具推薦](https://medium.com/@Kelly_CHI/tailwind-css-introduction-and-tools-68e770b2bf7f)

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 檔新增以下內容

OPENAI_API_KEY=<剛剛產生的 API KEY>

## 安裝 react-markdown套件

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 檔案新增以下這一行

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 檔案

STRIPE_SECRET_KEY=<剛剛的Secret key>

點選添加產品


新增一個 10 tokens 的產品

複製這邊的 API ID

修改 .env.local 檔案

STRIPE_PRODUCT_PRICE_ID=<API ID>

## 設定Webhooks

點選 Webhooks

點擊 在本地環境中測試


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

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:

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:

sudo apt update

Install the CLI:

sudo apt install stripe

這邊會需要登入 stripe

stripe listen --forward-to localhost:3000/api/webhooks/stripe


這樣可以取得 webhook signing secret

修改 .env.local 檔案 新增 STRIPE_WEBHOOK_SECRET 內容

STRIPE_WEBHOOK_SECRET=<webhook signing secret >

repo紀錄: https://github.com/gahgah147/nextjs-openai-starter/tree/Day4-%E8%A8%AD%E5%AE%9AStripe%E6%94%B6%E8%B2%BB%E5%8A%9F%E8%83%BD

# 部屬

## 建立新的repository
點選新增



## 設定 digitalocean

>https://www.digitalocean.com/

註冊好後選擇部屬到APPs 上

設定連結到github

這邊可以選擇想要的方案，這邊選擇Edit plan

這邊選擇最便宜的 每月5美元方案

## 接下來可以設定環境變數

選擇 Bulk Editor

複製 env.local 的所有內容



這邊點擊後會需要等待一段時間

成功後可以看到網站連結

修改環境變數 AUTH0_BASE_URL 為https://squid-app-zu4dz.ondigitalocean.app/

修改 auth0 的環境變數
>https://manage.auth0.com/

## 特別內容
BONUS!
Get $200 free credit for 60 days on DigitalOcean!
https://m.do.co/c/dee9dc245131

Did you enjoy this Next JS & OpenAI course? Then you'll love my other courses!
[Shadcn UI + Next JS - Build beautiful dashboards with shadcn](https://www.udemy.com/course/shadcn-ui/?referralCode=9BD15934CF78810643AB)

[Astro JS v3 & WordPress (Astro.js, TailwindCSS & WordPress)](https://www.udemy.com/course/astro-js-wordpress/?referralCode=52C5B5D605B8C93F521B)

[Tailwind CSS full e-commerce site with snipcart ~Tailwind v3](https://www.udemy.com/course/tailwind-css-ecommerce/?referralCode=0AE6E6613CA4548E2E1D)

[WordPress Gutenberg Block Development with React JS and PHP
](https://www.udemy.com/course/wordpress-gutenberg-block-development/?referralCode=27A46DC183EAB2DB3F47)

[Next JS ChatGPT clone with Next.JS & OpenAI (NextJS 13 2023)](https://www.udemy.com/course/nextjs-chatgpt/?referralCode=2CB7DFDC9A91F4EBDB76)

[GitHub Copilot: Use AI to write code for you! (Copilot 2023)](https://www.udemy.com/course/github-copilot/?referralCode=5068FE1B7ED44AD182DE)

[Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023](https://www.udemy.com/course/tailwind-css-zero-to-hero/?referralCode=91611503A7E185BBC495)

[Next JS & WordPress: Build rapid NextJS sites with Next & WP](https://www.udemy.com/course/next-js-wordpress/?referralCode=49EB7D4FC7617F4FD9F7)

[Udemy Course Creation for Web Developers (Unofficial)](https://www.udemy.com/course/udemy-course-creation-for-web-developers/?referralCode=717D4840DB4612306CCA)

[Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4]](https://www.udemy.com/course/gatsby-js-prismic-netlify/?referralCode=EA6EBA3E161913C0E729)

[Gatsby JS v5 & Headless WordPress (Gatsby & WordPress 2023)](https://www.udemy.com/course/gatsby-js-react-wordpress-graphql/?referralCode=B2CBF315D97B37292E8C)

[React styled components / styled-components [V5 EDITION]](https://www.udemy.com/course/react-styled-components/?referralCode=FF5DD0DA2F384776BC8F)

[Redux Saga (with React and Redux): Fast-track intro course
](https://www.udemy.com/course/redux-saga/?referralCode=4C70801F898304D0A9FC)

Subscribe to my YouTube channel for free Next JS, Gatsby, & React tutorials:
https://www.youtube.com/c/webdeveducation

I encourage you also to join the dedicated WebDevEducation facebook group here:
https://www.facebook.com/groups/403517157132972

As well as connecting with me on LinkedIn.
I’d be more than happy to help you out and endorse your skills related to this course (please message me with the course you enrolled on so I know which skills to endorse):

https://www.linkedin.com/in/tomemyrphillips/

# 遇到問題:

## Post 文章內容讀取不到