Skip to content

How to develop

Jump to bottom
Lumii edited this page Nov 14, 2022 · 6 revisions

Initialize the project

Next.js

  • npx create-next-app src --use-npm
  • cd src
  • npm run dev

Tailwind CSS

  • npm install -D tailwindcss postcss autoprefixer
  • npx tailwindcss init -p

in ./tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

in ./styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

in ./pages/_app.js:

import '../styles/globals.css';

File structure

  • ./pages/: 一個分頁一個檔案，如 ./pages/index.js 為首頁/； ./pages/trade.js為/trade；

  • ./components/: 依照使用頻率跟使用地方，分類 UI component，如 Layout, Shared

  • ./hooks/: 依照取用資料 state 的邏輯分為 contexts, mutations, queries 放 custom hooks

  • ./utils/: 放自己的 library

  • ./public/: 放靜態檔案，如圖片

  • ./styles/: 放 css 檔案

Development Flow

  • 在./hooks/存放資料 state，在./components/中寫好 UI component，將兩者放到./pages/，顯示該分頁的畫面
    • 例如連接錢包功能
      1. 連接錢包的按鈕放在./components/Shared
      2. 連接錢包的 function logic 寫在 ./utils/
      3. 連接錢包的 state 寫在./hooks/contexts/
      4. Context Provider 放到 ./pages/_app.js
      5. 在./pages/index.js結合連接錢包的按鈕跟功能
    • 若多個分頁都需連接錢包，就創建./components/Wallet/將連接錢包的按鈕跟功能放進去，其他分頁就不需要重複寫一樣的東西，以利維護
Clone this wiki locally