Ngày 1: Làm quen với Next.js

Dưới đây là hướng dẫn chi tiết cho Ngày 1: Làm quen với Next.js 🚀

💡

1️⃣ Cài đặt Next.js & Hiểu cấu trúc thư mục

Cài đặt Next.js

Trước tiên, bạn cần cài đặt Node.js (phiên bản LTS khuyến nghị). Kiểm tra bằng lệnh:

node -v

Nếu chưa có, tải từ: https://nodejs.org/

Sau đó, tạo một dự án Next.js mới:

npx create-next-app@latest my-next-app

Hoặc nếu dùng yarn:

yarn create next-app my-next-app

Di chuyển vào thư mục dự án và chạy server:

cd my-next-app
npm run dev

Kết quả: Next.js sẽ chạy tại http://localhost:3000 🎉

Cấu trúc thư mục Next.js

Sau khi cài đặt xong, ta có các thư mục sau:

my-next-app/
│── node_modules/         # Thư viện cài đặt từ npm
│── pages/                # Chứa các trang của ứng dụng
│   ├── index.js          # Trang chủ
│   ├── _app.js           # Custom App component (giống layout)
│   ├── _document.js      # Custom Document
│   ├── api/hello.js      # API route
│── public/               # Chứa hình ảnh, favicon, file tĩnh
│── styles/               # Chứa file CSS
│── next.config.js        # File cấu hình Next.js
│── package.json          # File quản lý dependencies
│── .gitignore            # Danh sách file không commit vào Git
│── README.md             # Tài liệu dự án

📌 Điểm quan trọng:

pages/: Mỗi file trong đây sẽ trở thành một route của ứng dụng. Ví dụ, pages/about.js sẽ là /about.
public/: Chứa tài nguyên tĩnh như ảnh, favicon (/public/logo.png có thể truy cập qua /logo.png).
styles/: Chứa file CSS để style cho toàn bộ ứng dụng.

2️⃣ So sánh Next.js với React (CSR vs SSR vs SSG vs ISR)

Next.js có nhiều cách render trang:

Loại Render	Mô tả	Khi nào dùng?
CSR (Client-Side Rendering)	React truyền thống, fetch data sau khi tải trang	Khi dữ liệu thay đổi theo hành động người dùng (Dashboard, SPA)
SSR (Server-Side Rendering)	Fetch data mỗi lần request	Khi cần hiển thị nội dung động, SEO tốt (Bảng giá, tin tức)
SSG (Static Site Generation)	Trang được tạo sẵn lúc build, nhanh hơn SSR	Khi dữ liệu ít thay đổi (Blog, Docs)
ISR (Incremental Static Regeneration)	Kết hợp SSG + SSR, cập nhật nội dung mà không cần build lại	Khi dữ liệu cần cập nhật sau một khoảng thời gian (E-commerce)

📌 Ví dụ:

CSR (React SPA truyền thống): useEffect() để fetch API.
SSR (Next.js getServerSideProps): Load data từ server mỗi request.
SSG (Next.js getStaticProps): Dữ liệu được build sẵn.
ISR (revalidate trong Next.js): Cho phép cập nhật dữ liệu sau mỗi X giây mà không cần build lại app.

3️⃣ Tạo trang đầu tiên với `pages/index.js`

Bước 1: Chỉnh sửa pages/index.js

Mở file pages/index.js và thay đổi nội dung thành:

export default function Home() {
  return (
    <div>
      <h1>🚀 Chào mừng đến với Next.js!</h1>
      <p>Đây là trang đầu tiên của bạn.</p>
    </div>
  );
}

Lưu lại và kiểm tra tại http://localhost:3000 🖥️

Bước 2: Thêm CSS

Thay vì dùng CSS truyền thống, Next.js hỗ trợ CSS Modules.

Tạo file styles/Home.module.css:

.title {
  color: blue;
  text-align: center;
}

Sửa lại pages/index.js để import CSS module:

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

export default function Home() {
  return (
    <div>
      <h1 className={styles.title}>🚀 Chào mừng đến với Next.js!</h1>
      <p>Đây là trang đầu tiên của bạn.</p>
    </div>
  );
}

Kiểm tra lại trình duyệt, tiêu đề đã đổi sang màu xanh 🎨

Bước 3: Thêm navigation giữa các trang

Tạo thêm file pages/about.js:

export default function About() {
  return (
    <div>
      <h1>Trang Giới Thiệu</h1>
      <p>Đây là trang about của ứng dụng.</p>
    </div>
  );
}

Quay lại pages/index.js và thêm navigation:

import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div>
      <h1 className={styles.title}>🚀 Chào mừng đến với Next.js!</h1>
      <p>Đây là trang đầu tiên của bạn.</p>
      <Link href="/about">➡ Đi đến trang Giới Thiệu</Link>
    </div>
  );
}

🛠 Kết quả: Khi nhấn vào link, bạn sẽ được điều hướng đến /about mà không cần tải lại trang 🎉

🎯 Kết quả ngày 1

✅ Cài đặt Next.js và chạy server thành công.
✅ Hiểu cách Next.js tổ chức thư mục và cách mỗi file trong pages/ là một route.
✅ So sánh cách render trong Next.js: CSR vs SSR vs SSG vs ISR.
✅ Tạo trang đầu tiên với CSS Module và navigation.

Ngày 1: Làm quen với Next.js