在開始寫 React 元件之前，我們需要先建立開發環境。

1. 安裝 Node.js
   React 需要 Node.js 環境，Node.js 內建 npm（套件管理工具），方便安裝各種套件。

前往 Node.js 官方網站下載並安裝最新版本
安裝完成後，打開終端機檢查版本：

node -v   # 查看 Node.js 版本
npm -v    # 查看 npm 版本

• 建議使用 LTS 版本，比較穩定。

2. 建立 React 專案
   在終端機輸入:

npx create-next-app my-chatbot

• 完成後會自動建立資料夾 my-chatbot 並安裝套件

3. 啟動開發環境
   在終端機輸入:

npm run dev

伺服器啟動後，可以透過 Local 提供的網址進入頁面~

4. 加入自己的前端畫面

• 在 Next.js 13 以後，使用的是 App Router，首頁檔案位於：

app/page.js   （或 .jsx / .tsx）

這個檔案就是首頁的 React 組件，你可以直接修改裡面的內容。

• 如果要新增其他頁面，只要在 app/ 資料夾中新增檔案或資料夾即可。例如：

app/
├─ page.js        → 對應路由：/
└─ chat/
   └─ page.js     → 對應路由：/chat

這樣設定之後:

• 你可以在頁面中使用 Link 元件 進行跳轉：

 <Link href="/chat">前往 Chat 頁面</Link>

• 也可以直接在瀏覽器輸入網址：

http://localhost:3000/chat

這樣就能進入頁面啦~~~