강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Next.js Hoàn Hảo (v15): Tạo Blog Lập Trình Viên Dựa Trên Notion (với Cursor AI)

Đây là khóa học xây dựng blog thực tế dành cho developer dựa trên Notion cùng với việc học Next.js v15 App Router mới nhất. Ngoài ra, bạn cũng có thể thu được nhiều insight đa dạng như cách sử dụng Cursor AI.

(4.8) 58 đánh giá

306 học viên

  • gymcoding
실습 중심
React
Blog
Next.js
cursor
Cursor AI

Đánh giá từ những học viên đầu tiên

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

  • Đặc tả mới nhất Next.js v15 App Router theo tài liệu chính thức

  • Phát triển blog thực tế tích hợp API Notion

  • Cách phát triển hiệu quả với Cursor AI

  • React Server Component và Chiến lược tối ưu hóa (với ISR)

  • Triển khai cuộn vô hạn và Server Actions

  • Tối ưu hóa SEO, Tạo ảnh OG động, Triển khai Vercel

  • Kỹ thuật định tuyến nâng cao: Route Groups, Parallel Routes, v.v.

  • Triển khai modal có URL sử dụng Intercepting Routes

1

🎉 Động lực lập kế hoạch

Xin chào! Tôi là YouTubevà Inflearn에서 프로그래밍 지식을 공유하고 있는 짐코딩입니다.

Khóa học React mà tôi đã thực hiện đã nhận được nhiều đánh giá tích cực từ các bạn với "nội dung đáng tin cậy 99.999% dựa trên tài liệu chính thức". Đặc biệt, có rất nhiều phản hồi rằng các bạn đã dễ dàng hiểu được các khái niệm "State hoạt động như snapshot" và "Context, ReactQuery".

Bây giờ, để đáp ứng những yêu cầu không ngừng của các bạn, tôi muốn cùng bạn bắt đầu hành trình phát triển frontend sâu sắc hơn với khóa học Next.js.

"Tôi thực sự lười viết đánh giá khóa học nên không viết, nhưng cái này thì nhất định phải viết!!"
Tính đến ngày 6/4/2025, khóa học React tất cả đánh giá đều 5.0!!

👍 Next.js tiêu chuẩn phát triển web hiện đại

Next.js là framework dựa trên React phổ biến nhất trên toàn thế giới hiện nay, gần đây cung cấp các tính năng thay đổi cách mạng trong phát triển web hiện đại như App Router, Server Side Rendering (SSR), Incremental Static Regeneration (ISR). Với hơn 100,000 GitHub Star, nó đã trở thành tiêu chuẩn ngành đến mức các công cụ AI tạo sinh mới nhất được tối ưu hóa cho việc tạo code.

So sánh xu hướng tải xuống npm của Next vs Nuxt vs Remix

Next.js phiên bản mới nhất v15

📝 Tại sao lại là dự án blog?

Rất khó để phát triển năng lực thực chiến Next.js với những dự án ví dụ đơn giản không có tính thực dụng. Bởi vì không có quá trình trải nghiệm và giải quyết các vấn đề đa dạng mà chúng ta gặp phải trong thực tế. Sau khi suy nghĩ về vấn đề này, tôi đã chọn dự án blog dựa trên Notion mà các developer có thể thực sự sử dụng.

Bạn có thể học sâu các tính năng cốt lõi của Next.js thông qua việc trực tiếp xây dựng một blog thực tế có tính ứng dụng cao. Bằng cách cùng nhau giải quyết các vấn đề kỹ thuật đa dạng có thể gặp phải trong thực tế, bạn có thể phát triển năng lực phát triển thực chiến vượt ra ngoài lý thuyết đơn thuần. Đặc biệt, bạn cũng có thể trải nghiệm quy trình làm việc hiện đại giúp nâng cao năng suất phát triển bằng cách sử dụng Cursor AI đang nhận được sự chú ý lớn từ các nhà phát triển trong ngành.

Hơn nữa, khi khóa học tiến triển, bạn sẽ có thể cảm nhận được thành tựu lớn và động lực thông qua việc chứng kiến blog của riêng mình dần hoàn thiện thành một dịch vụ thực tế. Cảm giác thành tựu và tính thực tiễn khi tạo ra blog - yếu tố cốt lõi trong portfolio của developer - sẽ khiến việc học trở nên thú vị hơn bao giờ hết.

Sau khi hoàn thành khóa học, bạn không chỉ nắm vững các tính năng mới nhất của Next.js mà còn có thể sở hữu blog riêng của mình có thể sử dụng ngay lập tức.

Sau khi hoàn thành khóa học, bạn có thể tạo ra những sản phẩm như thế này

Ứng dụng web Next.js mới nhất

  • Next.js App Router và hiểu về Server Components

  • ISR, Streaming, Server Action và các kỹ thuật tối ưu hóa hiệu suất

  • Route Groups, Parallel Routes, Intercepting Routes và các kỹ thuật routing nâng cao khác

Xây dựng blog developer dựa trên Notion

  • Tích hợp Notion API triển khai hệ thống quản lý nội dung

  • Phát triển tính năng render Markdown/MDX, lọc thẻ

  • Tối ưu hóa SEO và triển khai tạo hình ảnh OG động


Quy trình phát triển sử dụng Cursor AI

  • Xây dựng môi trường phát triển bằng cách sử dụng các tính năng cốt lõi của Cursor AI

  • Composer, Notepad và các chức năng cốt lõi khác

  • Lập kế hoạch dự án dựa trên Cursor AI và insight

Công nghệ stack thiết yếu cho xu hướng web mới nhất

  • TypeScript và TailwindCSS v4 phát triển web hiện đại

  • ShadcnUI triển khai web responsive tinh tế

  • Bình luận Giscus, chế độ tối và các yếu tố tối ưu hóa trải nghiệm người dùng khác được áp dụng

Nội dung học tập

Phần (1~3) Xây dựng môi trường phát triển web thế hệ mới dựa trên AI

Thiết lập dự án với Next.js(v15), TypeScript, TailwindCSS v4, shadcn/ui và học quy trình phát triển sử dụng Cursor AI.

Phần (4~6) Định tuyến dựa trên tệp và UI hiện đại

Thành thạo hệ thống định tuyến dựa trên file của Next.js và tự tay triển khai giao diện blog trendy để tăng cường portfolio.

Phần (7~9) Phát triển và triển khai blog tích hợp Notion API

Xây dựng hệ thống quản lý nội dung với Notion API, triển khai MDX rendering và lọc tag, sau đó deploy thực tế lên Vercel.

Phần (10~12) Chiến lược tối ưu hóa hiệu suất React thế hệ mới

Học cách tối ưu hóa bằng cách triển khai server/client components, React 19 Suspense, streaming, và infinite scrolling với React Query.

Phần (13~14) Server Action và cải thiện trải nghiệm người dùng

Tối đa hóa hiệu suất với server action và chiến lược cache, cải thiện trải nghiệm người dùng với hệ thống bình luận Giscus và chế độ tối.

Phần (15~17) Tối ưu hóa web chuyên gia và làm chủ SEO

Thiết kế responsive, xử lý lỗi, ISR, Metadata API, hình ảnh OG động để tối đa hóa tối ưu hóa công cụ tìm kiếm và chia sẻ xã hội.

Phần 18 Kỹ thuật định tuyến nâng cao

Các kỹ thuật định tuyến nâng cao của Next.js như nhóm route, route song song, route chặn và triển khai modal có URL sử dụng những kỹ thuật này!

Sự kiện đánh giá khóa học Inflearn đang diễn ra 🎉

Xin chào! 🙂 Hiện tại chúng tôi đang tiến hành sự kiện đánh giá sau khóa học. 🎉
Sau khi hoàn thành khóa học, nếu bạn viết đánh giá chân thành và đầy đủ, chúng tôi sẽ tặng bạn 1 coupon khóa học làm quà!
Bạn có thể xem chi tiết và cách tham gia sự kiện ở bài học cuối cùng trong chương trình giảng dạy!
Hãy tham gia khóa học Next.js và nhận những ưu đãi đặc biệt! 🔥
(Đây là ưu đãi giới hạn chỉ dành cho 20 người đầu tiên, hãy nhanh tay tham gia!)

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

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

  • Những người muốn bắt đầu dự án thực chiến với Next.js

  • Người muốn học phương pháp phát triển hiện đại với công cụ AI

  • Những người muốn có blog phát triển của riêng mình trên Notion

  • Người muốn tìm hiểu xu hướng và tech stack phát triển web mới nhất.

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

  • HTML&CSS

  • JavaScript

  • React

Xin chào
Đây là

26,269

Học viên

1,577

Đánh giá

663

Trả lời

4.9

Xếp hạng

18

Các khóa học

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

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

Tất cả

80 bài giảng ∙ (14giờ 14phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

58 đánh giá

4.8

58 đánh giá

  • hello0948님의 프로필 이미지
    hello0948

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    48% đã tham gia

    Trước đây tôi đã có kinh nghiệm xây dựng blog cá nhân bằng Next. Tôi thấy rất thú vị khi giảng viên cung cấp những thông tin cụ thể và tỉ mỉ về Next dựa trên tài liệu chính thức, và tôi đã học được rất nhiều điều khi so sánh nó với những gì tôi nghĩ. Mong rằng trong tương lai sẽ có thêm nhiều bài giảng chất lượng như vậy. Cảm ơn thầy/cô.

    • gymcoding
      Giảng viên

      Chào bạn, xin chân thành cảm ơn những đánh giá quý báu của bạn! 🙏 Tôi rất vui khi biết rằng khóa học này vẫn hữu ích cho bạn mặc dù bạn đã có kinh nghiệm xây dựng blog bằng Next.js trước đây. Tôi đã cố gắng truyền đạt chính xác các thông số kỹ thuật mới nhất dựa trên tài liệu chính thức và tôi rất cảm kích vì bạn đã nhận ra điều đó~! 🥹 Tôi sẽ tiếp tục nghiên cứu và cập nhật thông tin mới nhất để tạo ra các bài giảng chất lượng cao hơn và nỗ lực tạo ra nội dung tốt hơn nữa trong tương lai. Nếu bạn có bất kỳ câu hỏi nào trong quá trình học, đừng ngần ngại hỏi nhé! Cảm ơn bạn. 😊

  • redsunofsky5366님의 프로필 이미지
    redsunofsky5366

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Đây là một bài giảng cho thấy bạn đã chuẩn bị kỹ lưỡng như thế nào. Cảm ơn bạn vì bài giảng thân thiện và chi tiết.

    • gymcoding
      Giảng viên

      Chào bạn, Ugi! Cảm ơn bạn rất nhiều vì những đánh giá quý giá! 😊 Tôi thực sự rất vui và cảm ơn bạn vì đã nhận ra thời gian và công sức tôi đã bỏ ra để chuẩn bị bài giảng. Nhờ bạn mà tôi cảm thấy có ý nghĩa hơn rất nhiều~! 🙇‍♂️ Các bài giảng còn lại cũng đã chuẩn bị những nội dung hữu ích hơn về liên kết Next.js và Notion, hy vọng bạn sẽ học tập thật hiệu quả. Nếu bạn có bất kỳ câu hỏi hoặc khó khăn nào trong quá trình học, đừng ngần ngại đặt câu hỏi bất cứ lúc nào! Tôi sẽ cố gắng đền đáp bạn bằng những nội dung tốt hơn trong tương lai. Một lần nữa xin cảm ơn bạn! 💪

  • jiheon22344564님의 프로필 이미지
    jiheon22344564

    Đánh giá 5

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    Dù chỉ mới tiếp xúc 바닐라js, jquery và không hề biết gì về TS, React khi tham gia khóa học, tôi vẫn có thể hiểu dễ dàng.

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      Đánh giá 12

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      31% đã tham gia

      Phần tôi nghe được thì chủ yếu là giải thích về cursor AI và thư viện nên chưa có gì nhiều để viết đánh giá khóa học...(Sau khi nghe hết sẽ chỉnh sửa sau) 😊 Khi mới bắt đầu dự án, việc tìm hiểu cách sử dụng thư viện, AI cũng khó khăn. Giảng viên đưa ra một chút gợi ý về cách cập nhật, cách xem tài liệu chính thức, nên sau này khi ôn tập lại, tôi nghĩ sẽ dễ dàng định hướng học tập. Giáo dục SW có tính tự chủ rất cao nên khó dạy chi tiết, việc gặp được một người hướng dẫn tốt rất quan trọng, và tôi nghĩ 짐코딩 là người hoàn toàn có thể đảm nhiệm vai trò đó. Một điều hơi tiếc là ở phần CSS, giảng viên có kinh nghiệm nên chắc chắn là tạo UI rất nhanh, cảm giác hơi khó theo kịp? Tất nhiên là có giáo án bài giảng đầy đủ nên không sao cả, nhưng những người không có kiến thức về tailwind lại phải học nữa à? Cảm giác là như vậy? Nó lại có cảm giác khác với CSS. Nhưng đó chẳng phải là số phận của developer sao... Cái gì không biết thì cũng phải thử dùng và học thôi nhỉ.. 😢😢 Cái tên dự án ""Blog phát triển dựa trên notion"" đã thú vị rồi nên tôi chuyển sang học, nếu bạn có kiến thức cơ bản về server và biết React thì tôi nghĩ sẽ rất thú vị khi sử dụng AI để nhanh chóng tạo dự án, triển khai và sau đó chỉnh sửa dần. Tôi rất rất khuyến khích!

      • gymcoding
        Giảng viên

        Chào bạn, Targeto! Cảm ơn bạn rất nhiều vì đánh giá quý báu. 👋 Tôi rất vui vì việc truyền đạt cách sử dụng Cursor AI, thiết lập thư viện và xem tài liệu chính thức ở đầu khóa học đã giúp ích cho bạn! 🙂 Cách tiếp cận này sẽ rất hữu ích cho bạn khi ôn tập hoặc thực hiện các dự án khác trong tương lai! 💪 Cảm ơn bạn rất nhiều về phản hồi về CSS và Tailwind CSS. Những người mới làm quen với Tailwind có thể cảm thấy khó khăn! Nhưng đừng lo lắng, bạn chỉ cần tập trung tối đa vào việc học Next.js là được. Với UI, chỉ cần hiểu khái niệm "nó được cấu tạo như thế này" là đủ rồi 🙂 Thêm vào đó, Tailwind CSS là một framework UI rất phổ biến trong phát triển hiện đại! Nếu bạn mới làm quen với Tailwind CSS lần này, nó sẽ trở thành một tài sản lớn cho hành trình phát triển sau này của bạn. Quá trình học một công nghệ mới đôi khi có thể cảm thấy quá sức, nhưng Tailwind CSS rất đáng giá. 👍 Chúc bạn học thật hiệu quả những bài còn lại và hoàn thành blog thật đẹp nhé! Nếu có bất kỳ câu hỏi hay cần giúp đỡ, đừng ngần ngại hỏi bất cứ lúc nào! ✨

    • jjeong님의 프로필 이미지
      jjeong

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      3.459.842 ₫

      Khóa học khác của gymcoding

      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!