Bài 9. Giao diện, hình ảnh, metadata và SEO

Một số khái niệm

• Core Web Vitals: chỉ số tốc độ Google dùng xếp hạng (LCP, CLS, INP).
• next/image: tự đổi sang WebP/AVIF, lazy load, giữ chỗ tránh nhảy bố cục.
• next/font: tải phông chữ lúc build, không gọi Google Fonts khi chạy.
• Metadata: title, description, Open Graph cho chia sẻ Facebook, Zalo.

Phông chữ và ảnh

// src/app/layout.tsx
import { Be_Vietnam_Pro } from 'next/font/google';
const font = Be_Vietnam_Pro({ subsets: ['vietnamese'], weight: ['400', '600', '700'] });
// <body className={font.className}>

import Image from 'next/image';
<Image src="/anh/truong.jpg" alt="Trường Đại học Thái Bình" width={800} height={450}
       className="rounded-xl" priority />   {/* priority cho ảnh lớn đầu trang */}
// ảnh từ máy chủ ngoài: khai báo images.remotePatterns trong next.config.ts

Metadata

// tĩnh
export const metadata = {
  title: { default: 'QLSV', template: '%s | QLSV' },
  description: 'Hệ thống quản lý sinh viên',
  openGraph: { images: ['/og.png'] },
};
// động theo dữ liệu
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const sv = await db.sinhVien.findUnique({ where: { id: Number(id) } });
  return { title: sv?.ho_ten ?? 'Không tìm thấy' };
}

Sitemap và robots

// src/app/sitemap.ts → /sitemap.xml
export default async function sitemap() {
  const ds = await db.baiViet.findMany({ select: { slug: true, updatedAt: true } });
  return [
    { url: 'https://qlsv.vn', lastModified: new Date() },
    ...ds.map(b => ({ url: 'https://qlsv.vn/bai-viet/' + b.slug, lastModified: b.updatedAt })),
  ];
}
// src/app/robots.ts → /robots.txt
export default function robots() {
  return { rules: { userAgent: '*', allow: '/', disallow: '/quan-tri' }, sitemap: 'https://qlsv.vn/sitemap.xml' };
}

Thư viện giao diện gợi ý: shadcn/ui (component dựng trên Tailwind, sao chép vào dự án), lucide-react (biểu tượng). Xem lại loạt Tailwind CSS Bài 11 về tích hợp với Next.js.