Mộc Viên
Mộc Viên
1️⃣ Giới thiệu về SSG và getStaticProps
SSG (Static Site Generation) là một kỹ thuật giúp Next.js tạo trang tĩnh ngay trong quá trình build.
🔹 Ưu điểm của SSG:
• Trang tải siêu nhanh vì được build sẵn.
• Giảm tải server vì không phải fetch API mỗi lần request.
• SEO tốt hơn vì nội dung được render sẵn.
🔹 getStaticProps giúp lấy dữ liệu trước khi build
• Chạy chỉ một lần khi build (next build).
• Dữ liệu sẽ không thay đổi cho đến khi bạn build lại.
2️⃣ Ví dụ sử dụng getStaticProps
Chúng ta sẽ hiển thị danh sách bài viết từ API giả lập JSONPlaceholder.
📌 Tạo file pages/posts.js
export default function Posts({ posts }) {
return (
<div>
<h1>Danh sách bài viết</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<h3>{post.title}</h3>
<p>{post.body}</p>
</li>
))}
</ul>
</div>
);
}
// Fetch dữ liệu trước khi build
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
const posts = await res.json();
return {
props: { posts }, // Trả về props cho component
};
}📌 Giải thích:
✅ getStaticProps() chạy trước khi build → fetch API → trả về props chứa danh sách bài viết.
✅ Dữ liệu sẽ không thay đổi trừ khi build lại (next build).
✅ _limit=5 để lấy 5 bài viết đầu tiên.
🔹 Kết quả:
• /posts sẽ hiển thị danh sách bài viết.
• Không có request API khi người dùng truy cập (vì đã được build sẵn).
3️⃣ Dynamic Routing + getStaticPaths
🔹 Khi nào cần getStaticPaths?
• Khi có nhiều trang động cần được tạo trước.
• Ví dụ: /posts/1, /posts/2, …
📌 Tạo file pages/posts/[id].js
import { useRouter } from 'next/router';
export default function PostDetail({ post }) {
const router = useRouter();
// Kiểm tra fallback (tránh lỗi khi trang chưa được tạo)
if (router.isFallback) {
return <h1>Loading...</h1>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}
// Tạo đường dẫn động (SSG)
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
const posts = await res.json();
// Tạo danh sách đường dẫn động
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: true }; // fallback=true để tạo trang mới khi cần
}
// Fetch dữ liệu của từng trang
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
const post = await res.json();
return {
props: { post },
};
}📌 Giải thích:
✅ getStaticPaths() tạo danh sách các đường dẫn /posts/1, /posts/2 từ API.
✅ getStaticProps() fetch chi tiết từng bài viết theo id.
✅ fallback: true giúp tạo trang mới nếu id chưa được build sẵn.
🔹 Kết quả:
• /posts/1 → Hiển thị chi tiết bài viết số 1.
• /posts/2 → Hiển thị chi tiết bài viết số 2.
4️⃣ Fetch API bằng Axios (thay vì fetch())
Mặc định Next.js dùng fetch(), nhưng bạn cũng có thể dùng Axios cho code gọn hơn.
📌 Cài đặt Axios:
npm install axios📌 Sử dụng trong pages/posts.js
import axios from 'axios';
export async function getStaticProps() {
const res = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5');
return { props: { posts: res.data } };
}📌 Lợi ích của Axios:
• Viết code ngắn gọn hơn.
• Xử lý lỗi dễ hơn (try...catch).
🎯 Kết quả Ngày 3
✅ Sử dụng getStaticProps để fetch data trước khi build.
✅ Kết hợp getStaticPaths để tạo dynamic routes tĩnh.
✅ Fetch API bằng fetch() hoặc axios.
📌 Bước tiếp theo: Ngày 4
Mộc Viên