강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Front-end

手につくNext.js - ブログを作る

Next.jsで個人的なブログを作成し、Next.jsを手に入れてください！

（4.9）受講レビュー 8件

受講生 187名

難易度 初級

受講期間 無制限

  • hajoeun
이론 실습 모두
이론 실습 모두
개발블로그
개발블로그
Next.js
Next.js
React
React
Blog
Blog
이론 실습 모두
이론 실습 모두
개발블로그
개발블로그
Next.js
Next.js
React
React
Blog
Blog

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

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

4.9

5.0

피카

100% 受講後に作成

こんにちはジョウン様、講義楽しく受講しました。 インフコンでジョウン様の発表を聞いてすぐにブログを作ってみ始めましたが、私はGuillermoのブログを見ながら制作をしてみました。 いつごろ講義が上がるか待っていた渦中..講義オープンなんて!!すぐに頑張りました。個人的に講義ではLeeのブログと似た形で作ってみることで、もっと楽しく感じられました。 講義を見る前にブログを制作してみて詰まった部分があったが、 最初はデータベースをどのようにするか心配しました。 vercelのstorageを使うことを学び、簡単にデータベースを活用できましたね。 二つ目は私のブログが検索になるのか？このような悩みがありましたが、初期設定になっているブログを活用するので、このようにすればいいのかという感覚が取れました。 ジョウン様が講義してくださった方々と私が既存にGuillermoスタイルに作っていたブログを組み合わせて再度アップグレードしてみるべきですね。 おかげで良い情報がたくさん得られました。ありがとうございます。 ☺️

5.0

Peter Cha

100% 受講後に作成

自分でもできるDirectory構造のような部分は芽を出し、本物の実用的な内容だけに集中して、Next.jsのServer Actions、PPRなどの技法まで素早く実習を通じて学習できるというのが最大の利点だと思います！ 👍 今回の講義のおかげで、Vercelのリーダーシップのコードも調べて、Open Sourceでコードを見ることができ、ベンチマークする過程を一緒にするというのが、とても楽しく自信がつく良い経験でした！ 🙌 Next.js コア理論と実践を適切に提供してくれる講義なので、すぐにトレンドを追いかけるのに役立つようになったようです。

5.0

gmldnjs0402

100% 受講後に作成

NextJSでブログ作りがとても参考になりました。ありがとうございます。

受講後に得られること

  • Next.jsのApp Routerのさまざまな活用方法

  • マークダウン文法をNext.jsで活用する方法

ブログを作って学ぶ Next.js
Next.jsで独自のスペースを作ろう！

Next.jsで独自のブログを作成する

誰もが他の人と同じ家に住みたいですか？誰かが自分だけの家を建て、他の人とは異なる大きさと形の空間を望むかもしれません。残念ながら、オフラインでは現実的な問題で、目的のスペースを持つことは困難です。

オンラインは違います。必要に応じて、誰でも自分のスペースを作成できます。私の手で建てられた家ができるのです。開発者の皆さんにとっては少し簡単です。

あなたはこの講義を通してあなたが直接建てた家を持つことになります。
#React、#Next.js、#nextjs、#ブログ

この講義で得られるもの

  • 自分で飾ってアップグレードできる個人ブログ

  • Next.jsでマークダウンを扱う方法を学ぶ


  • Next.js 14の最新のレンダリング技術を学び、学ぶ


何を学びますか？

1.ブログを作成するNext.jsの主な機能を学びます

SSR、SSG、ISR、PPRなどのプリレンダリング手法からRoute Groups、Server Actionsまで活用して、Next.jsの新機能を理解して習得しましょう！

詳細ページ画像01

Next.jsの最新機能を学ぶ

2. 2つのブログアーキテクチャの長・短所を学ぶ

Pages Routerを活用する一般的なNext.jsブログのアーキテクチャ、App Routerで作成したVercelリーダーシップのブログアーキテクチャを学び、好きなように組み合わせてブログを作成できます！

詳細ページ画像02

Vercel リーダーシップ ブログを掘る

3.私の手で作ったブログを管理する方法を学びます。

AIを活用してテーマ変更、視聴数機能をはじめ、好きな機能を追加し、自分だけの空間で飾っていける個人ブログの作り方を学びます！

詳細ページ画像03

AIでブログを作る

受講前の注意

練習環境

  • オペレーティングシステムと環境：macOS、Node.js 20.17.0

  • 使用ツール: VSCode, Claude(Opus), PostgreSQL

  • 使用サービス: Vercel

学習資料

この講義を聞く前に

インフコン発表を最初に聞いた方の期待

インフコンで説明してくれたNext.jsブログのベストプラクティス分析について聞いたので、どのようにブログを作ったのかとても気になりました。自分だけのブログをぜひ作りたいと思っていましたが、講義がとても楽しみです！
（この*銀）

インフコンでNext.jsのブログを分析した講演は本当に面白いです！最後に比較表でまとめてくださったのもひと目で入ってくれてよかったです！こんなにきれいに講演してくださった方のNext.js講演とは完全に期待されますね(シム*ヨン様)

静的配布をしなければならない状況でしたが、知っていることであっても一度まとめられてよかったです！サンプル分析を通して見ると、より理解が良くなりました:) 講義も楽しみです！ （チェ・ジョン）

ティーストーリーを使ってNext.jsで独自のブログを開発・運営しようとするNext.js勉強中でしたが、ついに私のニーズにぴったりの講義が出ますね！ （イ*ホ様）

インフコンセッション聞いたのですが、インサイトも広がりすぎてとても助かりました！私もおかげで良い内容社内で共有できると思いますね！セッションを聴くのに一緒に楽しく働く感じなのでとても良かったし、新しい技術を学ぶ時の快感を久しぶりに感じさせてくれて本当にありがとうございました〜 （キム・フン様）

インフコンを通じて川の予告編をちょっと味わってみると新しい講座がとても楽しみです！オープン日までときめく心でお待ちいたします！
（イム*ソク）

関連講義

講義サムネイル01

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 個人ブログを直接実装したい方

  • Next.jsの本番に活用してみたい方

  • 個人ブログをNext.jsに移行したい方

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

  • React

  • TypeScript

  • Next.js

こんにちは
です。

1,073

受講生

83

受講レビュー

47

回答

4.8

講座評価

3

講座

마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.

 

"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.

カリキュラム

全体

30件 ∙ (2時間 35分)

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

  • ohsubin님의 프로필 이미지
    ohsubin

    受講レビュー 15

    ∙

    平均評価 4.9

    5

    100% 受講後に作成

    こんにちはジョウン様、講義楽しく受講しました。 インフコンでジョウン様の発表を聞いてすぐにブログを作ってみ始めましたが、私はGuillermoのブログを見ながら制作をしてみました。 いつごろ講義が上がるか待っていた渦中..講義オープンなんて!!すぐに頑張りました。個人的に講義ではLeeのブログと似た形で作ってみることで、もっと楽しく感じられました。 講義を見る前にブログを制作してみて詰まった部分があったが、 最初はデータベースをどのようにするか心配しました。 vercelのstorageを使うことを学び、簡単にデータベースを活用できましたね。 二つ目は私のブログが検索になるのか？このような悩みがありましたが、初期設定になっているブログを活用するので、このようにすればいいのかという感覚が取れました。 ジョウン様が講義してくださった方々と私が既存にGuillermoスタイルに作っていたブログを組み合わせて再度アップグレードしてみるべきですね。 おかげで良い情報がたくさん得られました。ありがとうございます。 ☺️

    • petercha900526님의 프로필 이미지
      petercha900526

      受講レビュー 8

      ∙

      平均評価 4.6

      5

      100% 受講後に作成

      自分でもできるDirectory構造のような部分は芽を出し、本物の実用的な内容だけに集中して、Next.jsのServer Actions、PPRなどの技法まで素早く実習を通じて学習できるというのが最大の利点だと思います！ 👍 今回の講義のおかげで、Vercelのリーダーシップのコードも調べて、Open Sourceでコードを見ることができ、ベンチマークする過程を一緒にするというのが、とても楽しく自信がつく良い経験でした！ 🙌 Next.js コア理論と実践を適切に提供してくれる講義なので、すぐにトレンドを追いかけるのに役立つようになったようです。

      • stay8507015님의 프로필 이미지
        stay8507015

        受講レビュー 1

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        • heewon97님의 프로필 이미지
          heewon97

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          NextJSでブログ作りがとても参考になりました。ありがとうございます。

          • leeebug님의 프로필 이미지
            leeebug

            受講レビュー 11

            ∙

            平均評価 5.0

            5

            100% 受講後に作成

            自分だけのブログをNext.jsで自作する過程は思ったより簡単ではなかったですが、二度の失敗を経て、ついにデプロイまで成功しました。この講義を通じて、ブログの基本構造を理解し、自分で実装するのに大変役立ちました。今後も良い講義を期待しています。

            ￥3,641

            hajoeunの他の講座

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

            手につくNext.js - 移行강의 썸네일

            手につくNext.js - 移行

            hajoeun

            ReactからNext.js 14に移行し、ReactとNext.jsの違いを学びます。 Next.jsをより深く理解することができます！

            초급

            초급

            Next.js, React, vitejs

            手につくNext.js - 移行강의 썸네일

            手につくNext.js - 移行

            hajoeun

            手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

            手で熟すNext.js - 公式ドキュメントを見る

            hajoeun

            公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！

            초급

            초급

            Next.js, next.js13, React

            手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

            手で熟すNext.js - 公式ドキュメントを見る

            hajoeun

            似ている講座

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

            手につくNext.js - 移行강의 썸네일

            手につくNext.js - 移行

            hajoeun

            ReactからNext.js 14に移行し、ReactとNext.jsの違いを学びます。 Next.jsをより深く理解することができます！

            초급

            초급

            Next.js, React, vitejs

            手につくNext.js - 移行강의 썸네일

            手につくNext.js - 移行

            hajoeun

            手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

            手で熟すNext.js - 公式ドキュメントを見る

            hajoeun

            公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！

            초급

            초급

            Next.js, next.js13, React

            手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

            手で熟すNext.js - 公式ドキュメントを見る

            hajoeun

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

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

            gymcoding

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

            초급

            초급

            React, Blog, Next.js

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

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

            gymcoding

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ강의 썸네일

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

            ludgi

            Whisperをローカルで実行し、FastAPIとNext.jsを活用してAI音声認識アプリを迅速に開発する実践プロジェクトの講義です。リアルタイム音声認識まで実装し、短時間で簡単なポートフォリオとして活用できる成果物を完成させることができます。

            초급

            초급

            Next.js, FastAPI, whisper

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ강의 썸네일

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

            ludgi

            バイブコーディング With Claude Codeでウェブサービス作り강의 썸네일

            バイブコーディング With Claude Codeでウェブサービス作り

            ref63184917

            現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

            입문

            입문

            HTML/CSS, JavaScript, Next.js

            バイブコーディング With Claude Codeでウェブサービス作り강의 썸네일

            バイブコーディング With Claude Codeでウェブサービス作り

            ref63184917

            1日で学ぶChatGPT API강의 썸네일

            1日で学ぶChatGPT API

            yangdongjun

            ウェブサイトをChatGPTと一緒に作成し、配布まで担当する講義！ Fine-tuningまで学びましょう。

            초급

            초급

            ChatGPT, React, netlify

            1日で学ぶChatGPT API강의 썸네일

            1日で学ぶChatGPT API

            yangdongjun

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

            초급

            초급

            React, Next.js, expo

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

            iOS/Androidアプリ開発のための本番 React Native - Basic

            Wintho

            Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

            초급

            초급

            React Native, React, ES6

            iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

            iOS/Androidアプリ開発のための本番 React Native - Basic

            Wintho

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

            John Ahn

            このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

            초급

            초급

            Clone Coding, Node.js, React

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

            John Ahn

            非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

            dingcodingco

            コーディング知識不要！ あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作成し、すぐにサービスまで連携します。

            입문

            입문

            Flutter, Next.js, cursor

            非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

            dingcodingco

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

            중급이상

            중급이상

            React, Next.js, cursor

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            Reactを上手に扱える開発者になる강의 썸네일

            Reactを上手に扱える開発者になる

            nakjasabal0079

            「リアクトが上手な開発者になる」という本が出版されました。 この本はリアクト学習前に必要なウェブの基本原理から最新のリアクトフックまで体系的に案内し、しっかりとした基礎知識を提供します。合計40個以上の多彩な実戦プロジェクトと豊富な実習例題を通じて理論を実務にすぐ適用し、問題解決能力を育てることができます。また、リダックスツールキット、Zustand、Firebaseなど現代ウェブ開発に必須の技術を一緒に学び、完成度の高いリアクトアプリケーション開発者として成長できるよう支援します。

            초급

            초급

            JavaScript, React, Firebase

            Reactを上手に扱える開発者になる강의 썸네일

            Reactを上手に扱える開発者になる

            nakjasabal0079

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

            중급이상

            중급이상

            Next.js, React, GraphQL

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り강의 썸네일

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

            Neo

            誰よりも早く学ぶSpringboot + NextJS RestAPI掲示板作り! SpringbootでCRUDサーバーを開発し、NextJSで自分だけの掲示板を作ってみましょう!

            입문

            입문

            React, Kotlin, TypeScript

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り강의 썸네일

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

            Neo

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）강의 썸네일

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding

            Next.js + Cursor IDE でチャットプログラムを1時間で実装できる能力が身につきます。

            입문

            입문

            nextjs, ChatGPT, React

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）강의 썸네일

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding

            SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

            SpringAI + Reactで作る自分だけの感情日記サービス

            Neo

            SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

            초급

            초급

            React, Kotlin, Spring Boot

            SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

            SpringAI + Reactで作る自分だけの感情日記サービス

            Neo

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

            초급

            초급

            React, Electron, GUI

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            公式文書で学ぶ本番タイプスクリプト강의 썸네일

            公式文書で学ぶ本番タイプスクリプト

            sowhatcoding

            タイプスクリプトを正しく理解するには、公式文書を一度見てください。 文書の重要な部分だけがコックを拾い、分かりやすく伝えます。 実戦に必要な内容も一緒にお知らせする講義です！

            입문

            입문

            TypeScript, JavaScript, ES6

            公式文書で学ぶ本番タイプスクリプト강의 썸네일

            公式文書で学ぶ本番タイプスクリプト

            sowhatcoding

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

            nybs

            フロントエンドプロジェクトのミッションコンテンツです。DevTimeというタイマーアプリを直接実装しながらプロジェクト実習ができるよう、PRD企画書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスと同等レベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてみましょう 🚀

            입문

            입문

            React

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る강의 썸네일

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

            nybs

            The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

            dingcodingco

            AIはもはや選択ではなく生存の問題です。 3日かかっていた開発を30分に短縮し、反復業務はAIに任せてあなたはより重要な問題解決に集中してください。 理論ではなく実務ですぐに使えるAIネイティブ開発法で、会社で「AIが得意な開発者」として認められる確実な方法をお教えします。

            초급

            초급

            Spring Boot, Next.js, AI

            The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

            dingcodingco