全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－2. 專案建立

初始化和設置 Next.js 專案，包括基本配置和套件安裝。

2–1. 建立與初始化專案

• 創建一個新的專案資料夾並用 VS Code 開啟，在終端機中執行指令初始化一個新的 Next.js 專案：

npx create-next-app@latest ./

• 選擇使用 TypeScript、ESLint 和 Tailwind CSS。

參考: Next.js (create-next-app)

• 建議在使用 Tailwind CSS 進行開發時，安裝 VS Code 的 "Tailwind CSS IntelliSense" 擴充功能：這個擴充功能能顯示顏色預覽，並在將鼠標懸停在className上時，展示對應的 CSS 樣式。

“Tailwind CSS IntelliSense” 擴充功能

鼠標懸停在className上時，可以展示對應的 CSS 樣式

2–2. 安裝 dependencies 及設定 config

• 安裝 next-auth、mongoose、bcrypt：

npm install next-auth mongoose bcrypt

• 針對 TypeScript，額外安裝 @types/bcrypt：

npm install @types/bcrypt

• 在 next.config.js 中設定 serverActions: true（Next.js 14 版本之後可省略這個步驟）

參考: Next.js (Server Actions)

2–3. 安裝及設定 shadcn/ui

• 專案中會使用 shadcn-ui ，和一般 ui 套件不同的地方是只會針對需要的組件，在組件的資料夾裡面新增。
• 初始化 shadcn-ui，之後新增的ui組件會存放在 components/ui 資料中。

npx shadcn-ui@latest init

參考: shadcn/ui (Installation)

• 添加使用到的ui組件，如下拉式選單、按鈕、表單等：

npx shadcn-ui@latest add dropdown-menu
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add button
npx shadcn-ui@latest add form
npx shadcn-ui@latest add input
npx shadcn-ui@latest add toast

• 初始化 shadcn-ui 後，也包含了 lucide-react 的 icon 可以使用。

2–4. 專案結構整理

• 在初始化的專案中 app/page.tsx 為網站首頁， app/layout.tsx 用來添加重複使用的組件或共用樣式。
• layout.tsx 中設定的 metadata 與 SEO 的關係：使用符合用戶需求且清楚的關鍵字可以增加用戶點擊網站的意願。
• 另外需要創建 .env.local 用於儲存環境變數。
• 執行 npm run dev 指令以啟動並檢查專案是否正常運行。

程式碼

網站首頁

參考資料

Next.js (create-next-app)－

API Reference: create-next-app | Next.js

Next.js (Server Actions)－

Data Fetching: Server Actions and Mutations | Next.js

shadcn/ui (Installation)－

Next.js

回到目錄

全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－1專案介紹