此專案為六角學院 2024 Vue 前端新手營最終挑戰之成品，使用 ChatGPT 4o 重構為 Next.js 14
- Next.js 14（React 加強版）
建議使用 VSCode 搭配 ES7+ React/Redux/React-Native snippets
專案設置（Project setup）
將專案複製到本地端
$ git clone https://github.com/happyloa/next-todolist.git套件安裝
$ cd next-todolist
$ npm install執行專案（Start the server）
$ npm run dev在瀏覽器上輸入
http://localhost:3000/
即可在本地端預覽專案
位於 app
結構說明
app
├── login 豋入頁面（/login）
├── register 註冊頁面（/register）
├── todos 待辦事項清單列表頁面（/todos）
├── favicon.ico 網站圖示
├── globals.css 網站整體樣式，有做簡單的 reset
├── layout.js 網站整體架構設定，更改字型為思源黑體，並設定 og 圖片
└── scrollBar.css 客製化頁面卷軸樣式
位於 components
結構說明
src/components
└── todos
├── TodoInput.js 用來新增待辦事項的 input 元件
├── TodoInput.module.css 用來新增待辦事項的 input 元件的樣式
├── TodoListContent.js 代辦事項清單整體容器
├── TodoListContent.module.css 代辦事項清單整體容器的樣式
├── TodoListItem.js 代辦事項列表
├── TodoListItem.module.css 代辦事項列表的樣式
├── TodoNoItem.js 沒有代辦事項時，顯示這個裝飾元件
└── TodoNoItem.module.css 裝飾元件的樣式
├── FormStyle.module.css 表單元件（登入 & 註冊）的共用樣式
├── LoginForm.js 登入表單
├── LogoAndDecoImage.js 登入&註冊表單頁面裝飾元件
├── LogoAndDecoImage.module.css 登入&註冊表單頁面裝飾元件的樣式
├── RegisterForm.js 註冊表單
└── showAlert.js 獨立出來的 Sweet Alert 2 函數
位於 public
結構說明
public
├── icons 網站會用到的圖示
├── image 網站會用到的圖片
└── og-image.webp 社群媒體上的顯示縮圖