入門

建立新專案

我們建議您使用 pnpm 作為您的套件管理器，因為它比 npm 或 yarn 更快、更有效率。如果您尚未安裝 pnpm，您可以透過執行以下指令全域安裝：

npm install -g pnpm

要建立 Next.js 應用程式，請開啟您的終端機，cd 進入您想要存放專案的資料夾，然後執行以下指令：

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

此指令使用 create-next-app，這是一個命令列介面 (CLI) 工具，可為您設定 Next.js 應用程式。在上述指令中，您也使用了 --example 旗標以及此課程的 起始範例。

探索專案

與教你從頭開始撰寫程式碼的教學不同，本課程的大部分程式碼已經為你準備好了。這更貼近真實世界的開發情況，你可能會需要使用現有的程式碼庫。

我們的目標是幫助你專注於學習 Next.js 的主要功能，而無需編寫所有應用程式碼。

安裝完成後，在你的程式碼編輯器中開啟專案，並導覽至 nextjs-dashboard。

cd nextjs-dashboard

讓我們花一些時間探索這個專案。

資料夾結構

你會注意到該專案具有以下資料夾結構

• /app：包含應用程式的所有路由、元件和邏輯，這是你主要工作的地方。
• /app/lib：包含應用程式中使用的函式，例如可重複使用的工具函式和資料提取函式。
• /app/ui：包含應用程式的所有 UI 元件，例如卡片、表格和表單。為了節省時間，我們已為你預先設計了這些元件的樣式。
• /public：包含應用程式的所有靜態資源，例如圖片。
• 設定檔：你還會注意到應用程式根目錄中的設定檔，例如 next.config.js。使用 create-next-app 啟動新專案時，會建立並預先設定大部分的這些檔案。在本課程中，你不需要修改它們。

歡迎探索這些資料夾，如果還不了解所有程式碼的功能也不用擔心。

佔位符資料

在建構使用者介面時，有一些佔位符資料會很有幫助。如果資料庫或 API 尚無法使用，你可以

• 使用 JSON 格式或 JavaScript 物件形式的佔位符資料。
• 使用第三方服務，例如 mockAPI。

對於此專案，我們在 app/lib/placeholder-data.ts 中提供了一些佔位符資料。檔案中的每個 JavaScript 物件都代表資料庫中的一個表格。例如，對於 invoices 表格

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

在設定您的資料庫的章節中，您將使用這些資料來初始化您的資料庫（填入一些初始資料）。

TypeScript

您可能也注意到大多數檔案都有 .ts 或 .tsx 的副檔名。這是因為這個專案是用 TypeScript 寫的。我們希望創建一個反映現代網頁開發趨勢的課程。

如果您不懂 TypeScript 沒關係 - 我們會在需要時提供 TypeScript 程式碼片段。

現在，看一下 /app/lib/definitions.ts 檔案。在這裡，我們手動定義了將從資料庫返回的類型。例如，invoices 表格具有以下類型：

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript, this is called a string union type.
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  status: 'pending' | 'paid';
};

透過使用 TypeScript，您可以確保不會意外地將錯誤的資料格式傳遞給您的組件或資料庫，例如將 string 而不是 number 傳遞給 invoice 的 amount。

如果您是 TypeScript 開發人員

• 我們正在手動宣告資料類型，但為了更好的類型安全，我們建議使用 Prisma 或 Drizzle，它們會根據您的資料庫結構自動產生類型。
• Next.js 會偵測您的專案是否使用 TypeScript，並自動安裝必要的套件和設定。Next.js 還附帶了一個 TypeScript 外掛 供您的程式碼編輯器使用，以協助自動完成和類型安全。

執行開發伺服器

執行 pnpm i 來安裝專案的套件。

pnpm i

接著執行 pnpm dev 來啟動開發伺服器。

pnpm dev

pnpm dev 會在連接埠 3000 上啟動您的 Next.js 開發伺服器。讓我們檢查一下它是否正常運作。

在您的瀏覽器上開啟 https://127.0.0.1:3000。您的首頁應該如下所示，這是特意未設定樣式的。