강의

멘토링

커뮤니티

NEW
Programming

/

Web Development

Trang Web Portfolio Tối Thượng với Next.js 14 (Từ con số 0 đến anh hùng)

Trong khóa học này, tôi sẽ hướng dẫn bạn từng bước qua 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 Next.js 14, React.js, Tailwind CSS và Nodemailer. Dựa trên kinh nghiệm giúp học viên hiểu các khái niệm front-end phức tạp, tôi tập trung vào giải thích rõ ràng, 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 đủ 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, navigation, layouts, metadata và loading states. Khi đã nắm vững các kiến thức nền tảng, chúng ta sẽ xây dựng một trang web portfolio đầy đủ 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 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, công khai mã nguồn trên GitHub và tự tin hiểu được sự khác biệt giữa React routing và Next.js routing, đồng thời biết cách xây dựng các ứng dụng thực tế, sẵn sàng cho production. Không yêu cầu kinh nghiệm trước đó với Next.js.

1 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

  • Ehizeex Tech
next.js
next.js
Website
Website
react
react
fullstack
fullstack
Next.js
Next.js
react.js
react.js
TailwindCSS
TailwindCSS
JavaScript
JavaScript
nodemailer
nodemailer
next.js
next.js
Website
Website
react
react
fullstack
fullstack
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 sử dụng Next.js 14 và React

  • Làm chủ định tuyến động, định tuyến riêng tư và sắp xếp tệp trong Next.js

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

  • Thiết kế giao diện responsive sử dụng Tailwind CSS

  • Gửi và nhận hàng nghìn email sử dụng Nodemailer và Next.js APIs

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

  • Triển khai ứng dụng sẵn sàng cho production trên Vercel

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

Website Portfolio Hoàn Chỉnh với Next.js 14 – Từ Số Không Đến Triển Khai

Xây dựng một trang web portfolio hiện đại, hiệu suất cao sử dụng Next.js 14, React, Tailwind CSS và Nodemailer, tuân theo các thực tiễn thực tế trong ngành được sử dụng bởi các lập trình viê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 gặp khó khăn trong việc chuyển từ lý thuyết sang dự án thực tế. Dựa trên kinh nghiệm giảng dạy và hướng dẫn các lập trình viê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à triển khai thực hành thay vì những 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 portfolio hoàn chỉnh sẵn sàng cho production, triển khai nó lên Vercel, và công khai mã nguồn của bạn trên GitHub, chính xác như các chuyên gia làm.

Hình ảnh gợi ý:

  • Xem trước website portfolio hoàn chỉnh (desktop & mobile)

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

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

Bạn Sẽ Học Được Gì

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

Trong phần này, học viên sẽ 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

  • Tìm hiểu về colocation tệp, routes riêng tư, nhóm routes và routes lồng nhau

  • Nắm vững đị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 React và định tuyến Next.js

  • Sử dụng layouts, templates, metadata, trạng thái loading và trang lỗi một cách chính xác

Hình ảnh gợi ý:

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

  • Sơ đồ luồng route động

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

Phần (2): Từ khóa cốt lõi – Giao diện người dùng, Hoạt ảnh, API & Triển khai

Trong phần này, học viên sẽ áp dụng kiến thức của mình để xây dựng một trang web portfolio hoàn toàn động và 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 responsive sử dụng Tailwind CSS

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

  • Triển khai các slider, card, ngăn kéo điều hướng và 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 cuộn trang

  • Xây dựng API Next.js 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 UI (thẻ, thanh trượt, biểu mẫu)

  • Demo hiệu ứng cuộn

  • Sơ đồ request/response API

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

Trước Khi Đă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ụ cần thiết

  • Node.js (khuyến nghị 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 cần máy ảo

Cấu hình PC (Khuyến nghị)

  • CPU: Intel i5 / Ryzen 5 hoặc cao hơn

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

  • Dung lượng lưu trữ: 10–20 GB ổ đĩ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

    • Mã nguồn đầy đủ của dự án

    • Tài nguyên và nội dung 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 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 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 điều hướng

    • Học viên có thể tái sử dụng dự án cho portfolio cá nhân của họ


Yêu cầu trước

  • 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 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: làm theo và code cùng với gi강viên

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

  • 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ỉ 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

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

Khóa học này cung cấp chứng nhận hoàn thành ở định dạng phù hợp cho hồ sơ xin việc và danh mục đầu tư.

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

💡Học Thông Minh với Tùy Chọn Ngôn Ngữ cho Âm Thanh và Phụ Đề

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

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

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

  • 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ụ riêng lẻ

  • Các lập trình viên front-end đã biết HTML, CSS và JavaScript cơ bản và muốn chuyển sang phát triển React và Next.js hiện đại

  • Học viên đang gặp khó khăn trong việc hiểu sự khác biệt giữa routing của React và routing của Next.js

  • Các lập trình viên muốn tạo một trang web portfolio chuyên nghiệp để giới thiệu kỹ năng của họ

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

  • 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 sẽ được giải thích từng bước một

Xin chào
Đây là

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!

Ưu đãi có thời hạn

38.500 ₫

30%

1.133.181 ₫

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!