강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

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

学習した受講者のレビュー

こんなことが学べます

  • 公式ドキュメントベース Next.js v15 App Router 最新スペック

  • Notion API連携 実践ブログ開発

  • Cursor AI を活用した効率的な開発方法

  • React Server Componentと最適化戦略 (with ISR)

  • 無限スクロールとサーバーアクションの実装

  • SEO最適化と動的OG画像生成そしてVercelデプロイ

  • 高度なルーティング技術: Route Groups, Parallel Routesなど

  • Intercepting Routes を活用した URL 付きモーダルの実装

1

🎉 企画動機

こんにちは!YouTubeとInflearnでプログラミング知識を共有しているジムコーディングです。

私が進行したReact講義は「公式ドキュメントに基づく99.999%信頼できる内容」として多くの方々から好評をいただきました。特に「スナップショットのように動作するState」と「Context、ReactQuery」の概念を簡単に理解できたというフィードバックが多くありました。

今度は皆さんの絶え間ないリクエストにお応えして、Next.js講座でより深いフロントエンド開発の旅を一緒に歩んでいきたいと思います。

"私は本当に受講レビューを書くのが面倒で書かないのですが、これは絶対に書かなければなりません!!"
2025. 4. 6 基準 React講座 全受講レビュー5.0!!

👍 Next.js 現代ウェブ開発標準

Next.jsは現在、世界で最も人気のあるReactベースのフレームワークとして、最近ではApp Router、サーバーサイドレンダリング(SSR)、増分静的生成(ISR)など、現代のWeb開発を革新的に変化させる機能を提供しています。GitHub Star 10万以上を記録し、最新の生成型AIツールがコード生成に最適化されるほど業界標準となりました。

Next vs Nuxt vs Remix npm ダウンロード推移比較

Next.js最新バージョンv15

📝 なぜブログプロジェクトなのか?

実用性のない単純な例題プロジェクトでは、Next.jsの実戦能力を向上させることは困難です。実務で直面する様々な問題を経験し、解決する過程がないからです。このような悩みの末、開発者が実際に使用できるNotion基盤のブログプロジェクトを選択しました。

実用性のある本格的なブログを直接実装しながら、Next.jsの核心機能を深く学習することができます。実務で直面する可能性のある様々な技術的問題を一緒に解決しながら、単純な理論を超えた実戦開発能力を身につけることができます。特に現職の開発者たちの間で大きな注目を集めているCursor AIを活用して、開発生産性を高める現代的なワークフローも一緒に体験していただけます。

さらに、講義が進むにつれて皆さんだけのブログが実際のサービスとして完成していく様子を通じて、大きな達成感とモチベーションを得ることができます。開発者ポートフォリオの核心要素であるブログを作りながら得る達成感と実用性が学習をより興味深いものにしてくれるでしょう

講義受講後にはNext.js最新スペックの習得はもちろん、実際にすぐに使用可能な自分だけのブログまで手に入れることができます。

講義を受講すると、このような成果物を作ることができます

最新のNext.jsウェブアプリケーション

  • Next.js App Routerとサーバーコンポーネントの理解

  • ISR、Streaming、サーバーアクションなどの性能最適化技法

  • Route Groups、Parallel Routes、Intercepting Routesなどの高度なルーティング技術

Notionベースの開発者ブログ構築

  • Notion API連携コンテンツ管理システム実装

  • Markdown/MDXレンダリング、タグフィルタリング機能開発

  • SEO最適化および動的OG画像生成の実装


Cursor AI活用開発ワークフロー

  • Cursor AIの核心機能を活用した開発環境構築

  • Composer、Notepad等の核心機能の使用

  • Cursor AI基盤プロジェクト企画及びインサイト

最新ウェブトレンド必須技術スタック

  • TypeScriptとTailwindCSS v4モダンウェブ開発

  • ShadcnUIを活用した洗練されたレスポンシブWeb実装

  • Giscusコメント、ダークモードなどのユーザーエクスペリエンス最適化要素の適用

学習内容

セクション (1~3) AI基盤次世代ウェブ開発環境構築

Next.js(v15)、TypeScript、TailwindCSS v4、shadcn/uiを使用してプロジェクトをセットアップし、Cursor AIを活用した開発ワークフローを学習します。

セクション (4~6) ファイルベースルーティングとモダンUI

Next.jsのファイルベースルーティングまでマスターし、トレンディなブログUIを直接実装してポートフォリオを強化します。

セクション (7~9) Notion API連携ブログ開発とデプロイ

Notion APIでコンテンツ管理システムを構築し、MDXレンダリングとタグフィルタリングを実装して実際にVercelにデプロイします。

セクション (10~12) 次世代React性能最適化戦略

サーバー/クライアントコンポーネント、React 19 Suspense、ストリーミング、React Queryで無限スクロールを実装し、最適化のノウハウを習得します。

セクション (13~14) サーバーアクションとユーザーエクスペリエンスの改善

サーバーアクションとキャッシュ戦略でパフォーマンスを最大化し、Giscusコメントシステムとダークモードでユーザーエクスペリエンスを向上させます。

セクション(15~17)エキスパート級ウェブ最適化とSEOマスター

レスポンシブデザイン、エラーハンドリング、ISR、Metadata API、動的OGイメージで検索エンジン最適化とソーシャル共有を最大化します。

セクション18 高度なルーティング技術

Next.jsの高度なルーティング技術であるルートグループパラレルルートインターセプティングルート、そしてこれらの技術を活用したURLを持つモーダルの実装!

Inflearn受講レビューイベント開催中🎉

こんにちは!🙂 現在受講レビューイベントを開催中です。🎉
講義を受講された後、心のこもったレビューを書いていただくと講義クーポン1枚をプレゼントいたします!
詳細とイベント参加方法は講義カリキュラムの最終回でご確認いただけます!
Next.js講義を受講して、特別な特典もゲットしましょう!🔥
(先着20名限定の特典ですので、お急ぎください!)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsで実務プロジェクトを始める方

  • AIツールを活用した現代的な開発手法を学びたい方

  • Notionで自分だけの開発ブログを運用したい方

  • 最新のWeb開発トレンドと技術スタックを身につけたい方

前提知識、
必要でしょうか?

  • HTML&CSS

  • JavaScript

  • リアクト

こんにちは
です。

24,774

受講生

1,383

受講レビュー

631

回答

4.9

講座評価

17

講座

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

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

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

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

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

カリキュラム

全体

80件 ∙ (14時間 14分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

47件

4.8

47件の受講レビュー

  • h_e_ll_o_님의 프로필 이미지
    h_e_ll_o_

    受講レビュー 2

    平均評価 5.0

    5

    48% 受講後に作成

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

    • 짐코딩
      知識共有者

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

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

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

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

    • 짐코딩
      知識共有者

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

  • jiheon님의 프로필 이미지
    jiheon

    受講レビュー 4

    平均評価 5.0

    5

    15% 受講後に作成

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

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

      受講レビュー 12

      平均評価 5.0

      修正済み

      5

      31% 受講後に作成

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

      • 짐코딩
        知識共有者

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

    • 601135님의 프로필 이미지
      601135

      受講レビュー 2

      平均評価 5.0

      5

      96% 受講後に作成

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

      • 짐코딩
        知識共有者

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

    ¥19,411

    gymcodingの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!