NguyenThanhToan/ipv6-sims
1
0
Fork 0
forked from UKSOURCE/ipv6
Code Pull Requests Activity
Files
dd95ff5a2111e7f41918c5ae72d65c39275a8659
ipv6-sims/ke_hoach_ipv6.md
T
xuanduong 6a48d6351c init
2026-05-11 16:24:14 +07:00

12 KiB
Raw Blame History

Kế hoạch dự án IPV6 (Next.js App Router) — Tạo mới & Chuyển đổi từ HTML

1) Mục tiêu & phạm vi

  • Mục tiêu: Tạo project frontend mới tên IPV6 dựa trên “format sẵn” của codebase Next.js hiện tại, chuyển các trang HTML tĩnh sang Next.js (TypeScript/TSX), tách component, tách static data (JSON), và chuẩn hoá routing theo nghiệp vụ doanh nghiệp.
  • Phạm vi: Frontend בלבד (chưa làm backend). Các API gọi ra ngoài/CMS (nếu có trong codebase cũ) sẽ loại bỏ hoặc chuyển thành static JSON cho đúng scope.
  • Yêu cầu chung:
    • Ngôn ngữ UI mặc định: English (có thể để song ngữ EN/VI như UI toggle, nhưng content/label phải chuẩn hoá).
    • Design system thống nhất: màu sắc, font chữ, spacing, width/height chuẩn (không lệch giữa trang).
    • Responsive: hiển thị tốt trên desktop/tablet/mobile, kiểm tra layout với các breakpoint phổ biến.

2) Hiện trạng codebase (để bám “format sẵn”)

  • Đang dùng Next.js App Router: có thư mục app/.
  • Có layout sẵn app/layout.tsx đang import CSS global và render Header + Footer.
  • Có nhiều phần liên quan LAMS (metadata, service/api, pages/route cũ…).
  • Các file HTML nguồn cho IPV6 đang nằm ở root:
    • test.html (Trang chủ)
    • registration.html (Form đăng ký)
    • feedback.html (Form feedback)
    • sponsor.html (Kêu gọi đóng góp)
    • admin.html (Trang quản lý request — nội bộ coder)

3) Outcome mong muốn (cấu trúc thư mục đề xuất)

Mục tiêu: rõ ràng, tách bạch component/page/data/styles; dễ maintain; đúng App Router.

Đề xuất skeleton (có thể điều chỉnh theo format hiện tại):

  • app/
    • (site)/
      • layout.tsx (site shell: Header/Footer dùng cho public pages)
      • page.tsx (Home từ test.html)
      • registration/page.tsx
      • feedback/page.tsx
      • sponsor/page.tsx
    • (internal)/admin/
      • page.tsx (Admin từ admin.html, route group để tách nội bộ)
    • globals.css (CSS global/tokens)
    • not-found.tsx (tuỳ chọn)
  • app/components/
    • layout/ (Header, Footer, Container, Section, Nav, …)
    • home/ (các section của home)
    • forms/ (shared form fields/validation UI)
    • ui/ (Button, Input, Card, Modal, Badge…)
  • app/data/ (static JSON)
    • site.json (brand, links, footer)
    • home.json (hero, agenda, speakers, stats, venue, …)
    • sponsor.json
    • registration.json (copy text, options)
    • feedback.json
    • admin.json (cột bảng, status mapping…)
  • public/
    • assets/ (img/icons/fonts nếu có)

4) Quy ước routing (đảm bảo nghiệp vụ doanh nghiệp)

4.1 Public pages (khách truy cập)

  • / → Home (từ test.html)
  • /registration → Registration form (từ registration.html)
  • /feedback → Feedback form (từ feedback.html)
  • /sponsor → Sponsor/Donate (từ sponsor.html)

4.2 Internal pages (chỉ coder nội bộ)

  • /(internal)/admin → Admin request management (từ admin.html)
    • Yêu cầu “chỉ nội bộ”: vì không có backend, sẽ dùng cơ chế chặn tối thiểu (xem mục 9).

5) Chuyển đổi Component (HTML → TSX)

5.1 Nguyên tắc tách component

  • Tách theo layout shell (Header/Footer) và theo section của từng page.
  • Mỗi component:
    • Props typed (TypeScript).
    • Không hardcode text/data nếu có thể đưa vào JSON.
    • Không nhúng <script> DOM manipulation kiểu HTML (sẽ chuyển sang state + event trong React).

5.2 Trang chủ — test.html

Yêu cầu đặc biệt: “Tách ra trang home riêng, header và footer có components được tách riêng”.

  • Tạo app/(site)/page.tsx làm Home.
  • Tách Header/Footer:
    • app/components/layout/Header/*
    • app/components/layout/Footer/*
  • Tách các section của Home (đề xuất theo nội dung test.html):
    • HeroSection
    • VisionGoalsSection
    • StatsSection
    • AgendaSection
    • StakeholdersSection
    • RegistrationCTASection (nếu Home có form/CTA)
    • (Nếu có Speakers, Venue trong HTML thì tách tương tự)
  • Thay logic mobile menu:
    • HTML đang dùng script toggle class hidden → chuyển sang useState và className theo state.
  • Chuẩn hoá anchor navigation:
    • Link #agenda, #stats, … giữ nguyên trong trang Home, đảm bảo scroll behavior trong CSS global.

5.3 Trang Registration — registration.html

  • Tạo app/(site)/registration/page.tsx
  • Tách:
    • RegistrationForm (client component)
    • Shared inputs: TextField, SelectField, TextareaField, PhoneField
  • Form scope frontend-only:
    • Submit tạm: console.log + toast/alert (hoặc disable submit) tuỳ yêu cầu.
    • Chuẩn bị shape data để sau này nối backend.

5.4 Trang Feedback — feedback.html

  • Tạo app/(site)/feedback/page.tsx
  • Tách FeedbackForm tương tự Registration.

5.5 Trang Sponsor — sponsor.html

  • Tạo app/(site)/sponsor/page.tsx
  • Tách:
    • SponsorHero
    • SponsorPackages
    • SponsorCTA
    • SponsorFAQ (nếu có)

5.6 Trang Admin — admin.html (folder riêng)

  • Tạo app/(internal)/admin/page.tsx
  • Tách:
    • RequestsTable
    • RequestFilters
    • RequestDetailDrawer (tuỳ)
  • Vì chưa backend:
    • Data bảng lấy từ app/data/admin.json (static).
    • Chuẩn hoá model “Request”: id, createdAt, name, email, company, status…

6) JSON hoá static data (tách data ra file riêng)

6.1 Nguyên tắc

  • Mọi text/cấu hình lặp lại (nav items, footer links, section headings, stats items, agenda items…) → đưa vào JSON.
  • JSON đặt trong app/data/ (hoặc src/data/ nếu codebase đang dùng src/).
  • Page/Component đọc JSON theo hướng server component:
    • Page (server) import JSON → pass props xuống components.
    • Form components là client, chỉ nhận props cần thiết.

6.2 Danh mục data đề xuất

  • site.json: brandName, navLinks, footerLinks, social, legal, languages…
  • home.json: hero, vision, stats, agenda, stakeholders, venue, contact…
  • registration.json: copy + options.
  • feedback.json: copy + categories.
  • sponsor.json: tiers/packages + benefits.
  • admin.json: columns + seed rows + status label/color mapping.

7) Styling — CSS chung & thống nhất design system

7.1 Quyết định kỹ thuật (theo codebase hiện tại)

Codebase hiện có:

  • Đang import ./globals.css và có pipeline SCSS build sang public/assets/css/main.css.
  • Có tailwindcss trong devDependencies, nhưng HTML nguồn (test.html) đang dùng Tailwind CDN + inline <style>.

Kế hoạch:

  • Không dùng Tailwind CDN trong Next.js (loại bỏ script CDN).
  • Chọn 1 hướng (ưu tiên nhất quán):
    • Hướng A (khuyến nghị): cấu hình Tailwind nội bộ (tailwind.config + postcss) rồi chuyển class từ HTML qua TSX giữ nguyên nhiều utility class, đồng thời đưa token màu/font vào tailwind theme.
    • Hướng B: giữ SCSS/CSS thuần, chuyển utility class sang class semantic (tốn công hơn).

Chọn A sẽ giúp chuyển đổi nhanh nhất vì test.html đã viết theo Tailwind.

7.2 Design tokens cần chuẩn hoá

  • Colors: primary (gold), background (dark), surface containers, on-surface… (đang có trong test.html tailwind config).
  • Typography: font families (Space Grotesk, Inter, JetBrains Mono), size scale (fluid typography).
  • Layout: container max width (HD 1920/1800), gutter responsive.
  • Border radius / shadows: thống nhất.

7.3 Checklist responsive

  • Breakpoints tối thiểu: 360, 390, 414, 768, 1024, 1280, 1536, 1920.
  • Kiểm tra:
    • Header: menu desktop vs mobile drawer, body scroll lock.
    • Hero: text không tràn, CTA stack đúng.
    • Grid sections: số cột thay đổi đúng.
    • Form: label/input spacing, focus state, error state.

8) Routing & layout composition

8.1 Layout public

  • Dùng app/(site)/layout.tsx để wrap Header/Footer cho toàn bộ public pages.
  • app/layout.tsx giữ nhiệm vụ root (html/head, global css, metadata base).

8.2 Layout internal

  • app/(internal)/layout.tsx (tuỳ) để internal khác theme nếu cần (ví dụ tối giản, ưu tiên bảng).

9) Bảo vệ trang Admin (nội bộ coder) khi chưa có backend

Vì chưa backend, không thể “đăng nhập chuẩn” theo doanh nghiệp. Kế hoạch chặn tối thiểu:

  • Phương án 1 (khuyến nghị): middleware.ts + Basic Auth (HTTP) dựa trên env server
    • ADMIN_BASIC_AUTH_USER, ADMIN_BASIC_AUTH_PASS
    • Chỉ áp cho path /admin
  • Phương án 2: “secret query”/client guard (không an toàn) — chỉ dùng khi demo nội bộ.

Mục tiêu: không cho public truy cập đường dẫn admin một cách dễ dàng trong môi trường triển khai.

10) Xoá toàn bộ phần không liên quan IPV6 (LAMS)

10.1 Nguyên tắc dọn dẹp

  • Giữ lại:
    • cấu trúc Next.js/TS/ESLint
    • cấu trúc app/ và các helper cần thiết
    • pipeline CSS nếu dùng
  • Xoá/đổi tên toàn bộ:
    • Metadata/title/description liên quan LAMS
    • Pages/routes/components/services/api types chỉ phục vụ LAMS
    • Static assets LAMS (logo, favicon…) nếu không dùng

10.2 Checklist dọn dẹp cụ thể

  • package.json:
    • đổi "name" → ipv6 (hoặc ipv6-summit)
    • rà soát dependency không dùng (axios nếu không cần)
  • app/layout.tsx:
    • cập nhật metadata sang IPV6
    • cập nhật favicon/logo/fonts đúng theo IPV6
  • app/api/** (nếu đang gọi CMS cho LAMS):
    • xoá toàn bộ nếu không dùng trong scope frontend-only
  • app/components/**:
    • thay Header/Footer LAMS bằng Header/Footer IPV6
  • Các route/pages LAMS (ví dụ /contact, /student-support, /request, … nếu tồn tại trong app/):
    • xoá để tránh rác routing

11) Quy trình thực hiện chuyển đổi (giống “lần trước”)

11.1 Chuẩn bị

  • B1: Snapshot danh sách routes hiện tại (để biết thứ gì cần xoá).
  • B2: Xác định style strategy (Tailwind nội bộ vs SCSS).
  • B3: Tạo skeleton folders: (site), (internal), components, data.

11.2 Chuyển HTML → TSX theo từng trang

  • B4: Home (test.html)
    • Tách Header/Footer
    • Tách sections
    • Tách data ra home.json + site.json
    • Loại bỏ <script> và chuyển sang state
  • B5: Registration (registration.html)
    • Tách form + fields
    • Tách copy/options JSON
  • B6: Feedback (feedback.html)
  • B7: Sponsor (sponsor.html)
  • B8: Admin (admin.html)
    • Tạo route group (internal)
    • Dựng table UI từ static JSON
    • Thêm middleware bảo vệ

11.3 Chuẩn hoá

  • B9: Đồng bộ typography/colors (global CSS + config).
  • B10: Responsive pass + pixel polish (width/height, spacing).
  • B11: Cleanup LAMS triệt để.

12) Test plan (frontend-only)

  • Routing:
    • / home load OK
    • /registration, /feedback, /sponsor load OK
    • /admin bị chặn nếu chưa auth (theo middleware)
  • Responsive:
    • Header: mobile menu hoạt động, không scroll nền khi mở drawer
    • Sections: không overflow-x
    • Forms: input full width mobile, label rõ ràng
  • Accessibility tối thiểu:
    • Label liên kết input
    • Button type/aria cho menu toggle
    • Focus ring rõ

13) Deliverables

  • Next.js App Router pages đúng 5 trang yêu cầu.
  • Component hoá toàn bộ, Header/Footer tách riêng.
  • Static data tách JSON.
  • CSS/design system thống nhất + responsive chuẩn.
  • Xoá toàn bộ phần LAMS không liên quan, repo gọn chỉ còn IPV6.
View Git Blame Copy Permalink