Xây dựng website đầu tiên với Next.js (cho người mới)

Next.js là một trong những cách phổ biến nhất hiện nay để dựng website hiện đại bằng React — nó lo sẵn phần khung (định tuyến, tối ưu tốc độ, SEO) để bạn tập trung xây nội dung. Bài này dắt người mới đi trọn một vòng: cài môi trường, tạo dự án, hiểu cấu trúc, sửa trang đầu tiên, và đưa web lên mạng miễn phí. Cuối bài bạn có một website chạy thật trên internet.

Next.js là gì và cần biết gì trước?

Next.js là framework xây trên React: React lo giao diện, Next.js thêm sẵn định tuyến theo thư mục, tối ưu tốc độ và kết xuất tốt cho SEO. Trước khi bắt đầu, bạn nên nắm cơ bản HTML/CSS/JavaScript và React nhập môn. Nếu chưa, xem học JavaScript từ con số 0 và React cơ bản qua dự án trước. Các bước dựng dự án bên dưới.

Bước 1 — Cài Node.js

Next.js chạy trên Node.js, nên cài nó trước:

• Tải bản LTS tại nodejs.org và cài như phần mềm bình thường.
• Kiểm tra đã cài xong: mở Terminal/Command Prompt gõ node -v và npm -v — nếu hiện số phiên bản là ổn.
• Chưa có trình soạn code? Cài VS Code — xem hướng dẫn cài và dùng VS Code.

Bước 2 — Tạo dự án với create-next-app

Công cụ chính thức dựng sẵn bộ khung cho bạn. Trong Terminal, tại thư mục bạn muốn chứa dự án, gõ:

npx create-next-app@latest web-dau-tien

Lần đầu nó hỏi “Ok to proceed? (y)” để cài công cụ — gõ y. Sau đó nó hỏi vài lựa chọn (TypeScript, ESLint, Tailwind CSS…). 💡 Mẹo cho người mới: ở mục TypeScript chọn No để file trang là page.js (đúng như bài này), các mục khác cứ Enter mặc định. (Nếu bạn để mặc định TypeScript = Yes thì file sẽ là page.tsx — nội dung code trong bài vẫn chạy y hệt.) Sau khi xong:

cd web-dau-tien
npm run dev

Mở trình duyệt vào http://localhost:3000 — bạn sẽ thấy trang mẫu Next.js chạy. Vậy là môi trường đã hoạt động.

Bước 3 — Hiểu nhanh cấu trúc thư mục

Không cần hiểu hết, chỉ cần nắm mấy chỗ chính (dự án mới thường dùng App Router):

• app/ — nơi chứa các trang. File app/page.js (hoặc .tsx) chính là trang chủ.
• app/layout.js — bố cục chung bọc quanh mọi trang (header, footer).
• public/ — chứa ảnh và file tĩnh.
• package.json — khai báo dự án và các lệnh (npm run dev, npm run build).

Điểm hay của Next.js: mỗi thư mục trong app/ là một đường dẫn. Tạo app/gioi-thieu/page.js là tự có trang tại /gioi-thieu — không cần cấu hình định tuyến.

Bước 4 — Sửa trang đầu tiên

Mở app/page.js (hoặc app/page.tsx nếu bạn đã chọn TypeScript), xóa nội dung mẫu và thay bằng:

export default function Home() {
  return (
    <main>
      <h1>Xin chào, đây là web Next.js đầu tiên của tôi!</h1>
      <p>Tôi đang học dựng website hiện đại.</p>
    </main>
  );
}

Lưu lại — trình duyệt ở localhost:3000 tự cập nhật ngay (Next.js có hot-reload). Thử tạo thêm app/gioi-thieu/page.js với nội dung khác, rồi vào localhost:3000/gioi-thieu để thấy trang mới.

Bước 5 — Build thử bản chạy thật

Trước khi đưa lên mạng, kiểm tra bản dựng production:

npm run build

Lệnh này tạo bản tối ưu. Nếu build chạy không lỗi là dự án sẵn sàng triển khai. Gặp lỗi thì đọc kỹ thông báo — xem cách đọc lỗi và debug cho người mới.

Bước 6 — Đưa web lên mạng miễn phí (Vercel)

Cách gọn nhất là Vercel — chính hãng tạo ra Next.js:

1. Đẩy code lên GitHub. Cách nhanh cho người mới: dùng nút “Publish to GitHub” trong VS Code (tab Source Control). Hoặc bằng lệnh: git init → git add . → git commit -m "first" → tạo repo trống trên GitHub rồi git remote add origin <URL> → git push -u origin main. Chưa quen? Xem Git là gì — hướng dẫn cơ bản.
2. Đăng ký vercel.com, chọn Import repo GitHub vừa tạo.
3. Vercel tự nhận đây là dự án Next.js, build và triển khai. Vài phút sau bạn có website chạy thật ở địa chỉ ten-du-an.vercel.app.
4. Từ giờ, mỗi lần push code mới lên GitHub, Vercel tự cập nhật website.

Bản miễn phí của Vercel đủ cho dự án cá nhân và học tập.

Lỗi thường gặp của người mới

• command not found: npx/npm → chưa cài Node.js đúng, hoặc cần mở lại Terminal sau khi cài.
• Cổng 3000 bận → có dự án khác đang chạy; tắt nó hoặc để Next.js tự chọn cổng khác.
• Build lỗi vì cú pháp JSX → thiếu thẻ đóng, hoặc trả về nhiều thẻ mà không bọc trong một thẻ cha. Đọc dòng lỗi để biết file và dòng.

Bước tiếp theo cụ thể

Làm trọn vòng ngay hôm nay: cài Node → npx create-next-app → sửa app/page.js → npm run dev xem kết quả. Khi thấy trang của mình chạy ở localhost:3000, hãy đẩy lên GitHub và deploy Vercel để có link chia sẻ được. Có một website thật trên mạng là động lực lớn để học tiếp — sau đó thử thêm trang, thêm CSS, và đọc tài liệu chính thức tại nextjs.org để đi sâu.