강의

멘토링

로드맵

Inflearn brand logo image
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) 47 đánh giá

270 học viên

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

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

Dịch cái này sang tiếng Việt

  • Đặ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à

24,770

Học viên

1,382

Đánh giá

631

Trả lời

4.9

Xếp hạng

17

Các khóa học

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

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ả

47 đánh giá

4.8

47 đánh giá

  • h_e_ll_o_님의 프로필 이미지
    h_e_ll_o_

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    48% đã tham gia

    과거에 next를 사용해서 개인 블로그를 구축해본 경험이 있었습니다. 강사님께서는 최근 next 관련 정보들을 공식문서 기반으로 구체적이고 꼼꼼하게 알려주셔서 흥미로웠고 저의 생각과 비교해볼 수 있어 많은것들을 배울 수 있었습니다. 앞으로도 퀄리티 좋은 강의들 부탁드립니다. 감사합니다.

    • 짐코딩
      Giảng viên

      안녕하세요, 소중한 수강평 정말 감사드립니다! 🙏 이전에 Next.js로 블로그를 만들어보신 경험이 있으셨음에도 강의가 도움이 되었다니 기쁩니다. 공식문서 기반으로 최신 스펙을 정확하게 전달해드리기 위해 노력했는데, 알아봐 주셔서 감사합니다~! 🥹 앞으로도 퀄리티 높은 강의를 위해 계속 연구하고 최신 정보를 업데이트하며 더 나은 콘텐츠 제작에 힘쓰겠습니다. 수강 중 궁금한 점이 있으시면 언제든지 질문해주세요! 감사합니다. 😊

  • 우기님의 프로필 이미지
    우기

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    얼마나 많은 준비를 했는지 알 수 있는 강의입니다. 친절하고 상세한 강의, 감사합니다.

    • 짐코딩
      Giảng viên

      안녕하세요, 우기님! 소중한 수강평 정말 감사드립니다! 😊 강의 준비에 쏟은 시간과 노력을 알아봐 주셔서 진심으로 기쁘고 감사합니다. 덕분에 더 큰 보람을 느끼고 있어요~! 🙇‍♂️ 남은 강의에서도 Next.js와 Notion 연동에 관한 더 유익한 내용들이 준비되어 있으니, 알차게 학습하시길 바랍니다. 학습하시다가 궁금한 점이나 어려움이 있으시면 언제든 편하게 질문 남겨주세요! 앞으로도 더 나은 콘텐츠로 보답해 드리겠습니다. 다시 한번 감사드립니다! 💪

  • jiheon님의 프로필 이미지
    jiheon

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    바닐라js, jquery만 다뤄보고 TS, React에 대해서 아무것도 모르는 상태에서 수강했는데, 쉽게 이해할 수 있었습니다

    • 타겟토님의 프로필 이미지
      타겟토

      Đánh giá 12

      Đánh giá trung bình 5.0

      Đã chỉnh sửa

      5

      31% đã tham gia

      제가 들은 부분까지는 cursor AI랑 라이브러리 위주로 설명해주셔서 수강평을 적을게 마땅히 없지만...( 다 듣고 나중에 수정하겠슴돠) ㅎ 프로젝트 처음하면 라이브러리, AI 활용하는법 찾아보기도 힘든데. 어떤식으로 업데이트하고 공식문서는 어떻게 봐야하는지 조금씩 hint를 주시니까 나중에 다시 복습할때 학습 방향성을 쉽게 잡아가실수 있을거같아요. SW교육이란게 자율성이 너무 높다보니까 세세하게 가르쳐 주기도 어렵고 좋은 교육자 분 얻어걸리는게 정말 중요한데 짐코딩님은 그런 역할 충분히 가능하신 분이라 생각합니다. 한 가지 아쉬운 부부는 CSS부분에서 강사님은 경험이 있어서 확실히 빠르게 UI를 형성하시는데 뭔가 약~간 따라가기 버겁다? 물론 강의 교안으로 다 주셔서 상관은 없지만 tailwind지식이 없는 사람은 또 공부해야해? 이런느낌쓰? CSS랑은 또 다른 느낌이더라구요. 하지만 개발자의 숙명 아니겠습니까... 모르는것도 써보고 배워야져 뭐.. ㅜㅜ "notion을 기반 개발블로그" 프로젝트 이름부터 재밌어서 넘어왔는데 뭔가 서버관련 기본 개념있고 React 할 줄아시면 AI 활용해서 빠르게 프로젝트 만들업고 배포해서 나중에 고쳐나가는 재미도 있을것같아요. 저는 강강추 !

      • 짐코딩
        Giảng viên

        안녕하세요, 타겟토 님! 소중한 수강평 정말 감사드립니다. 👋 강의 초반에 Cursor AI 활용법과 라이브러리 셋팅 방법, 그리고 공식문서를 보는 방법을 전달드렸는데 도움이 되어 다행이에요! 🙂 추후에 복습하시거나 다른 프로젝트를 진행하실 때도 이와 같은 접근법이 많은 도움이 되실 거예요! 💪 CSS와 Tailwind CSS에 대한 피드백도 정말 감사합니다. 처음 Tailwind를 접하시는 분들께는 어렵게 느껴질 수 있죠! 하지만 걱정 마세요, 최대한 Next.js 학습에 집중하시면 됩니다. UI는 "이렇게 구성되는구나" 하고 개념만 이해하셔도 충분합니다 🙂 추가로 Tailwind CSS는 현대 개발에서 정말 인기 있는 UI 프레임워크입니다! 이번 기회에 Tailwind CSS를 처음 접하셨다면, 오히려 앞으로의 개발 여정에 큰 자산이 될 거예요. 새로운 기술을 배우는 과정이 때론 버겁게 느껴질 수 있지만, Tailwind CSS는 그만한 가치가 있습니다. 👍 앞으로 남은 강의도 유익하게 들으시고, 멋지고 예쁜 블로그 완성하시길 응원합니다! 궁금한 점이나 도움이 필요하실 때는 언제든 편하게 질문해주세요! ✨

    • 601135님의 프로필 이미지
      601135

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      96% đã tham gia

      Next.js 완벽 마스터 강의를 수강하면서, 그동안 웹 프론트엔드 개발을 공부하며 막연히만 알고 있던 Next.js의 개념과 활용법을 체계적으로 정리할 수 있었습니다. 그리고 여러가지 렌더링 방식들의 개념과 서버 액션, 라우팅들의 개념 등등 개발자로 취업을 준비하는 학생의 입장으로써 도움이 많이 되는 내용들이 많았습니다. 그리고 강사님이 열정적으로 설명하려는 모습이 너무 잘 보여서 다른 강의들도 수강하려고 합니다. 앞으로 취업 준비 잘 해보겠습니다!!

      • 짐코딩
        Giảng viên

        안녕하세요! 이렇게 정성스러운 수강평을 남겨주셔서 정말 감사합니다. 😊 Next.js의 핵심 개념들을 체계적으로 정리하실 수 있었다니 정말 뿌듯합니다. 특히 SSR, SSG, CSR 등의 다양한 렌더링 방식과 서버 액션, App Router 등의 개념들이 실제 개발에 큰 도움이 되셨다니 다행이에요! 앞으로의 취업 준비 과정을 진심으로 응원하겠습니다! 화이팅! 💪

    3.467.728 ₫

    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!