inflearn logo
inflearn logo

Website Portfolio Next.js 14 Đỉnh cao (Từ con số 0 đến chuyên gia)

Trong khóa học này, tôi sẽ hướng dẫn bạn từng bước quy trình xây dựng một trang web portfolio hoàn chỉnh, hiện đại và chuyên nghiệp bằng cách sử dụng Next.js 14, React.js, Tailwind CSS và Nodemailer. Dựa trên kinh nghiệm giúp đỡ các học viên nắm vững những khái niệm front-end phức tạp, tôi tập trung vào việc giải thích rõ ràng, đưa ra các ví dụ thực tế và triển khai thực hành. Thay vì chỉ giải thích lý thuyết, chúng ta sẽ cùng nhau xây dựng mọi thứ — từ thiết lập dự án đến triển khai cuối cùng — để bạn hiểu đầy đủ lý do tại sao và cách thức mọi thứ hoạt động. Bạn sẽ học các khái niệm cốt lõi của Next.js 14, bao gồm App Router, file colocation, private và dynamic routes, điều hướng (navigation), layouts, metadata và loading states. Sau khi nắm vững các kiến thức cơ bản, chúng ta sẽ xây dựng một trang web portfolio hoàn chỉnh với nội dung động, hiệu ứng cuộn mượt mà, tệp PDF có thể tải xuống và các nút kêu gọi hành động (call-to-action) được điều khiển bởi trạng thái cuộn. Đến cuối khóa học, bạn sẽ triển khai trang web của mình trên Vercel, xuất bản mã nguồn trên GitHub và tự tin hiểu được sự khác biệt giữa định tuyến của React và định tuyến của Next.js, đồng thời biết cách xây dựng các ứng dụng thực tế, sẵn sàng cho môi trường sản xuất. Không yêu cầu kinh nghiệm trước đó với Next.js.

4 học viên đang tham gia khóa học này

Độ khó Nhập môn

Thời gian Không giới hạn

Next.js
Next.js
react.js
react.js
TailwindCSS
TailwindCSS
JavaScript
JavaScript
nodemailer
nodemailer
Next.js
Next.js
react.js
react.js
TailwindCSS
TailwindCSS
JavaScript
JavaScript
nodemailer
nodemailer

Bạn sẽ nhận được điều này sau khi học.

  • Xây dựng một trang web portfolio hoàn chỉnh từ đầu bằng cách sử dụng Next.js 14 và React

  • Làm chủ định tuyến động (dynamic routing), các tuyến riêng tư (private routes) và sắp xếp tệp cùng vị trí (file colocation) trong Next.js

  • Tạo các hiệu ứng cuộn mượt mà, hoạt ảnh và các thành phần giao diện người dùng tương tác

  • Thiết kế các bố cục đáp ứng (responsive) bằng cách sử dụng Tailwind CSS

  • Gửi và nhận hàng ngàn email bằng cách sử dụng Nodemailer và Next.js API

  • Tạo và tải xuống các tài liệu PDF trực tiếp từ trang web

  • Triển khai ứng dụng sẵn sàng cho môi trường thực tế trên Vercel

  • Phát hành và quản lý mã nguồn dự án trên GitHub

Website Portfolio Next.js 14 Đỉnh Cao – Từ Con Số 0 Đến Khi Triển Khai

Xây dựng một trang web danh mục cá nhân hiện đại, hiệu suất cao bằng cách sử dụng Next.js 14, React, Tailwind CSS và Nodemailer, tuân theo các quy trình thực tế trong ngành được sử dụng bởi các nhà phát triển front-end, full-stack và ứng dụng web.

Khóa học này được thiết kế dành cho những học viên đang gặp khó khăn trong việc chuyển từ lý thuyết sang các dự án thực tế. Dựa trên kinh nghiệm giảng dạy và cố vấn cho các nhà phát triển, tôi đã tạo ra khóa học này để giải thích các khái niệm phức tạp từng bước một, sử dụng các ví dụ trực quan, sơ đồ và thực hành thực tế thay vì những lời giải thích trừu tượng.

Bạn sẽ không chỉ học Next.js—bạn sẽ xây dựng một trang portfolio hoàn chỉnh sẵn sàng cho môi trường thực tế, triển khai nó lên Vercel và xuất bản mã nguồn của mình trên GitHub, chính xác như cách các chuyên gia thực hiện.

Hình ảnh gợi ý:

  • Xem trước trang web danh mục dự án cuối khóa (máy tính & di động)

  • Sơ đồ cấu trúc thư mục dự án

  • Sơ đồ luồng hoạt động của Next.js App Router

Những gì bạn sẽ học

Phần (1): Các từ khóa cốt lõi – Kiến thức cơ bản về Next.js 14 & Định tuyến

Trong phần này, học viên sẽ được tìm hiểu về kiến trúc cốt lõi của Next.js 14 và cách các ứng dụng React hiện đại được cấu trúc bằng App Router.

Bạn sẽ:

  • Hiểu về Next.js 14 App Router và hệ thống định tuyến dựa trên tệp tin (file-based routing)

  • Tìm hiểu về sắp xếp tệp cùng vị trí (file colocation), các tuyến đường riêng tư (private routes), nhóm tuyến đường (route groups) và các tuyến đường lồng nhau (nested routes)

  • Làm chủ định tuyến động và truyền dữ liệu giữa các trang

  • Hiểu sự khác biệt giữa định tuyến trong React và định tuyến trong Next.js

  • Sử dụng đúng cách các layout, template, metadata, trạng thái loading và trang báo lỗi

Hình ảnh gợi ý:

  • Sơ đồ cấu trúc thư mục App Router

  • Sơ đồ luồng định tuyến động

  • Hình ảnh so sánh Layout và Template

Phần (2): Các từ khóa cốt lõi – UI, Hoạt ảnh, API & Triển khai

Trong phần này, học viên sẽ vận dụng kiến thức của mình để xây dựng một trang web danh mục cá nhân hoàn toàn động và có tính tương tác với các tính năng thực tế.

Bạn sẽ:

  • Xây dựng bố cục đáp ứng (responsive) bằng cách sử dụng Tailwind CSS

  • Tạo các hiệu ứng cuộn mượt mà và hoạt ảnh

  • Triển khai các thanh trượt (slider), thẻ (card), ngăn kéo điều hướng (navigation drawer) và các nút tương tác

  • Tạo và tải xuống tài liệu PDF (nút CV)

  • Tạo các nút kêu gọi hành động dựa trên thao tác cuộn

  • Xây dựng Next.js APIs và gửi hàng nghìn email bằng Nodemailer

  • Triển khai ứng dụng trên Vercel

  • Xuất bản và quản lý dự án trên GitHub

Hình ảnh gợi ý:

  • Ảnh chụp màn hình các thành phần giao diện người dùng (thẻ, thanh trượt, biểu mẫu)

  • Bản demo hiệu ứng cuộn trang

  • Sơ đồ yêu cầu/phản hồi API

  • Màn hình triển khai Vercel

Trước khi bạn đăng ký

Môi trường thực hành

Hệ điều hành & Phiên bản

  • Windows 10 / 11

  • macOS

  • Linux / Ubuntu

Công cụ bắt buộc

  • Node.js (khuyên dùng phiên bản LTS)

  • Visual Studio Code

  • Trình duyệt web (Chrome, Edge, hoặc Firefox)

  • Tài khoản Git & GitHub (miễn phí)

  • Không yêu cầu máy ảo

Thông số kỹ thuật PC (Khuyến nghị)

  • CPU: Intel i5 / Ryzen 5 trở lên

  • RAM: tối thiểu 8 GB (khuyến nghị 16 GB)

  • Lưu trữ: 10–20 GB dung lượng đĩa trống

  • GPU: Không yêu cầu

Tài liệu học tập

  • Tài liệu được cung cấp

    • Toàn bộ mã nguồn của dự án

    • Tài sản và tài nguyên của dự án

    • Các tệp cấu hình

    • Các thành phần có thể tái sử dụng

    • Các bài học video hướng dẫn từng bước

    Lưu ý quan trọng

    • Tổng thời lượng khóa học: ~10+ giờ

    • Mã nguồn được cung cấp thông qua tải xuống hoặc liên kết đám mây

    • Các tệp được sắp xếp theo từng phần để dễ dàng tìm kiếm và điều hướng

    • Học viên có thể tái sử dụng dự án cho danh mục sản phẩm cá nhân (portfolio) của mình


Điều kiện tiên quyết

  • Kiến thức cơ bản về HTML, CSS và JavaScript được khuyến nghị nên có

  • Không yêu cầu kinh nghiệm trước đó với Next.js

  • Các kiến thức cơ bản về React sẽ rất hữu ích nhưng sẽ được giải thích khi cần thiết

Ghi chú khóa học

  • Video chất lượng cao và âm thanh rõ ràng

  • Cách học tốt nhất: theo dõi và viết mã cùng với người hướng dẫn

  • Sinh viên có thể đặt câu hỏi trong phần Hỏi & Đáp (Q&A)

  • Khóa học có thể được cập nhật để phù hợp với các phiên bản Next.js trong tương lai

Bản quyền & Tuyên bố miễn trừ trách nhiệm

  • Tất cả tài liệu khóa học và mã nguồn được cung cấp chỉ dành cho mục đích sử dụng cá nhân và giáo dục 제공됩니다.

  • Không được phép phân phối lại hoặc bán lại nội dung này

💡Khi bạn hoàn thành khóa học này

Khóa học này cung cấp chứng chỉ hoàn thành với định dạng phù hợp cho sơ yếu lý lịch và hồ sơ năng lực.

Bằng cách hoàn thành khóa học, bạn có thể nhận được chứng chỉ này, thứ có thể dùng làm bằng chứng chính thức cho những thành tựu học tập của bạn.

💡Học tập thông minh với các tùy chọn ngôn ngữ cho Âm thanh và Phụ đề

Bạn có thể chuyển đổi cả âm thanh và phụ đề tùy theo phong cách học tập của mình. Hãy chọn ngôn ngữ mà bạn ưu tiên.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người mới bắt đầu muốn học Next.js 14 bằng cách xây dựng một dự án thực tế thay vì các ví dụ rời rạc

  • Các nhà phát triển Front-end đã biết cơ bản về HTML, CSS, JavaScript và muốn chuyển sang phát triển React và Next.js hiện đại.

  • Sinh viên đang gặp khó khăn trong việc hiểu sự khác biệt giữa định tuyến (routing) trong React và Next.js

  • Những nhà phát triển muốn tạo một trang web hồ sơ năng lực chuyên nghiệp để thể hiện kỹ năng của mình

Cần biết trước khi bắt đầu?

  • Khuyến nghị nên có kiến thức cơ bản về HTML, CSS và JavaScript

  • Không yêu cầu kinh nghiệm trước đó với Next.js

  • Kiến thức cơ bản về React sẽ hữu ích nhưng không bắt buộc, vì các khái niệm đều được giải thích từng bước một.

Xin chào
Đây là Ehizeex Tech

Chương trình giảng dạy

Tất cả

76 bài giảng ∙ (10giờ 1phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học khác của Ehizeex Tech

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Ưu đãi có thời hạn, kết thúc sau 7 ngày ngày

20.020 ₫

30%

588.299 ₫