【Next.js專案】購物網站建構_建立架構

原文發表於 Medium。

在建構一個完整的多頁式網站時，首先要先構思一下：我們需要哪些主要頁面？之前，我說過要寫一個簡單的購物網站專案，現在就是出發的時候了！

本專案使用Next.js + TailwindCSS建構，因此使用 create-next-app 專案建立時，記得要選擇TailwindCSS的建構。

npx create-next-app@latest  
  
What is your project named?  my-app //隨便取名  
Would you like to use TypeScript?  No / Yes  //N  
Would you like to use ESLint?  No / Yes //Y  
Would you like to use Tailwind CSS?  No / Yes //Y  
Would you like your code inside a `src/` directory?  No / Yes //Y  
Would you like to use App Router? (recommended)  No / Yes //Y  
Would you like to use Turbopack for `next dev`?  No / Yes //Y  
Would you like to customize the import alias (`@/*` by default)?  No / Yes //N  

主要頁面有哪些

通常在購物網站中一定有商品的瀏覽頁面，在販售商品較為單純的網站中，可能首頁就是負責讓客戶瀏覽商品的，直到商品種類逐漸複雜，才漸漸開闢分頁，讓首頁變成進入分類頁面的入口站。

主流的購物網站由於販售商品種類繁多，因此首頁主要是活動宣傳與商品分類子頁面的入口。

但也有所謂的單頁式網站SPA(single page application)，在網頁上方提供商品資訊供瀏覽，頁面下方則是提出訂單與輸入客戶資料的訂單欄位，如此簡單的構造只適合鎖定少數利基商品的網站業者。

為了要展示next.js的威能，我打算採用主頁面＋購物車頁面＋結帳頁面＋商品說明頁的架構：

my-nextjs-ecommerce/  
│  
├── src/  
│ ├── app/  
│ │ ├── layout.jsx # 根布局  
│ │ ├── page.jsx # 主頁面 (含推薦商品)  
│ │ ├── cart/  
│ │ │ └── page.jsx # 購物車頁面  
│ │ ├── checkout/  
│ │ │ └── page.jsx # 結帳頁面  
│ │ ├── products/  
│ │ │ └── [id]/  
│ │ │ └── page.jsx # 單個商品詳情頁面

本次我使用Next.js最新的App Router版本，並且我也習慣使用src資料夾作為主要資料的存放地。

在App Router版本中，分頁的控制是使用資料夾來實現的。在上方的專案架構說明圖中，app資料夾下方有三個資料夾cart、checkout、products分別負責購物車、結帳與商品內容， 每個最下層的子資料夾中都有一個page.jsx，在網站URL的呈現上就是：

cart/page.jsx = http://主網址/cart  
checkout/page.jsx = http://主網址/checkout  
products/[id]/page.jsx = http://主網址/products/任意id

如此一來，對網站的層次就有非常明確清楚的瞭解。

在頁面設計上，我使用layout.jsx達成每個頁面的Header跟Footer都統一的效果，大概如下圖的樣子：

這樣就可以確保User在切換不同頁面時，都可以輕鬆掌握共通的重要資訊與與功能，前者如購物車內容物數量，後者如首頁按鈕等。

輔助資料夾

除了app資料夾的內部建構外，我會另外建立幾個與app資料夾同層級的其他輔助資料夾：

my-nextjs-ecommerce/  
│  
├── src/  
│ ├── app/ *  
│ ├── component/  
│ ├── context/  
│ ├── data/  
│ ├── image/  
│ ├── lib/

• component：作為組成頁面的可重複使用元件存放處，如Button.jsx這種檔案。（可以發現檔名通常大寫，是標示可重複使用元件的慣例）
• context：有些時候寫成store，存放客戶端全局訊息系統的資料，例如useContext或Redux等。
• data：伺服器或頁面使用的固定資料，例如產品資訊等。
• image：如字面上意思，存放圖片。
• lib：存放伺服器使用的邏輯資料，大多內容都是function為主。

確立了資料架構後，我們就可以來大展身手了！

下一篇我們先從Header跟Footer建立開始。有時這是第一步（初期卡關時，就會來這裡浪費時間（誤）），也可能是最後一步，但我們要先從layout.js的功能開始講，因此從這裡開始。

若喜歡這樣的文章，還請給我幾個掌聲，您的支持是我寫下去的原動力！