Ngày 5: Component & Styling

✅ Sử dụng CSS Module & Tailwind CSS
✅ Tạo UI component: Navbar.js, Footer.js
✅ Tổ chức component theo best practices

💡

Ngày trước đó

1️⃣ Sử dụng CSS Module trong Next.js

📌 CSS Module giúp bạn tạo style riêng cho từng component mà không sợ bị trùng lặp class.

🔹 Tạo một file CSS Module:

Tạo styles/Home.module.css:

.container {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.title {
  color: blue;
  font-size: 24px;
}

🔹 Sử dụng CSS Module trong index.js:

import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Chào mừng đến với Next.js!</h1>
    </div>
  );
}

📌 CSS Module có gì hay?
✅ Chỉ ảnh hưởng đến component sử dụng → Không sợ trùng tên class.
✅ Dễ tổ chức và dễ maintain → Mỗi component có file CSS riêng.
✅ Được Next.js hỗ trợ sẵn, không cần cấu hình thêm.

2️⃣ Sử dụng Tailwind CSS trong Next.js

📌 Cài đặt Tailwind CSS:
Chạy lệnh sau trong terminal:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

📌 Cấu hình Tailwind:
Mở file tailwind.config.js, sửa lại như sau:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

📌 Thêm Tailwind vào globals.css:
Mở styles/globals.css và thêm:

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

📌 Sử dụng Tailwind trong component:
Ví dụ, sửa pages/index.js:

export default function Home() {
  return (
    <div className="max-w-xl mx-auto text-center p-6">
      <h1 className="text-3xl font-bold text-blue-500">Chào mừng đến với Next.js!</h1>
      <p className="text-gray-600">Học Next.js cùng Tailwind CSS.</p>
    </div>
  );
}

📌 Tại sao nên dùng Tailwind CSS?
✅ Nhanh hơn CSS truyền thống (không cần đặt tên class phức tạp).
✅ Dễ tùy chỉnh giao diện với utility classes.
✅ Tối ưu cho performance (Next.js chỉ load CSS nào được dùng).

3️⃣ Tạo UI Component `Navbar.js` & `Footer.js`

📌 Tạo thư mục components/ và file Navbar.js:

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav className="bg-blue-600 p-4 text-white">
      <ul className="flex space-x-4">
        <li><Link href="/">Trang chủ</Link></li>
        <li><Link href="/about">Giới thiệu</Link></li>
        <li><Link href="/contact">Liên hệ</Link></li>
      </ul>
    </nav>
  );
}

📌 Tạo file Footer.js:

export default function Footer() {
  return (
    <footer className="bg-gray-800 text-white text-center p-4 mt-6">
      <p>&copy; 2025 MyWebsite. All rights reserved.</p>
    </footer>
  );
}

📌 Thêm Navbar và Footer vào pages/_app.js để hiển thị trên mọi trang:

import '../styles/globals.css';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

function MyApp({ Component, pageProps }) {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      <main className="flex-1">
        <Component {...pageProps} />
      </main>
      <Footer />
    </div>
  );
}

export default MyApp;

4️⃣ Cách tổ chức component theo best practices

📌 Cấu trúc thư mục khuyến nghị:

/pages
  index.js
  about.js
  contact.js
/components
  Navbar.js
  Footer.js
/styles
  globals.css
  Home.module.css

📌 Tips tổ chức code tốt hơn:
✅ Tạo thư mục components/ để quản lý UI component.
✅ Dùng CSS Module hoặc Tailwind để tránh trùng CSS.
✅ Bọc Navbar và Footer trong _app.js để hiển thị ở mọi trang.

🎯 Kết quả Ngày 5

✅ Biết cách sử dụng CSS Module để tạo style riêng cho component.
✅ Cài đặt Tailwind CSS để viết CSS nhanh và tối ưu hơn.
✅ Tạo và sử dụng Navbar.js & Footer.js trong layout của ứng dụng.
✅ Hiểu cách tổ chức component theo best practices.

Ngày 5: Component & Styling