手につくNext.js - ブログを作る
hajoeun
Next.jsで個人的なブログを作成し、Next.jsを手に入れてください！
초급
Next.js, React, Blog
BEST
手で熟すNext.js - 公式ドキュメントを見る
公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！
学習した受講者のレビュー
こんなことが学べます
トラブルシューティングのツールとしてNext.jsの必要性を理解する
Next.jsの基本概念とApp Routerを学び、手に慣れる
React 18で登場したサーバーコンポーネント（RSC）を味わう
にんじんエンジニアで勉強する
Next.js 13! 💡
フロントエンド開発者なら、Next.js
Next.jsは、Webアプリの制作と配布に強力なツールです。
Webアプリを迅速かつ効率的に構築できるようにするNext.jsは、現在Netflix、Nike、Ticktokなどの企業でも活発に使用されています。
こんにちは！ハジョウンです👋
マープル、バンクサラダを経て現在はニンジンでフロントエンドエンジニアとして働いています。
フロントエンドのエンジニアは、毎日一緒に注がれる新しい技術に負担を感じます。たぶんNext.jsについても負担感を感じているかもしれません。最近はReact 18の最新機能を導入したNext.js 13バージョンが出てきて、その負担感が大きくなったと思います。
私もそうでした。 Next.jsを使ったことはありませんが、新しい概念を理解していませんでした。
気をつけて新しい技術を理解してみようと努力する過程に今回の講義を作ることになりました。教えるときに最も多く学ぶということをよく知っています。学んで男走者は心で学び勉強してこの講義を準備しました。今回の講義を通じて、皆さんに以下のような価値を伝えていきたいと思います。
- 1️⃣多くのフレームワークの中でNext.jsを学ぶべき理由を教えてください。
- 今後、フロントエンドエンジニアとして新しいツールを選ぶ際に良い基準となる知恵も得られてほしいと思います。
- 2️⃣Next.js 13バージョンで知っておくべき重要な概念を見てみましょう。
- 新しいルーティングシステムであるApp Routerを筆頭に、サーバーコンポーネント(Server Component)、データフェッチ(Data Fetching)、キャッシュ(Caching)、そして再検証(Revalidating)まで見てみて「知ってみると難しくない」という考えをしてほしいと思います。
- 3️⃣学習したコアコンセプト、アプリを作ってみながら活用します。
- この過程でミスもして、エラーも向き合いながら実務で知っておけば良い覚醒情報を得ていってほしいです。
こんな方を考えて作りました💁♂️
😢Next.js...私は知りません。
Reactを学び、実務で使っています。しかし、まだNext.jsはきちんと学んだことがありません。みんなNext.jsについて話すのに私だけがわからないと思います。
📌他人が新しい技術を話すと必ず学ぶべきではありません。本当に必要なときに学んでも遅くはありません。しかし、同僚の開発者と一緒にNext.jsについて話したい場合は、私の講義が役に立つと思います！
😵💫公式文書を見るのは難しいです。
Next.js 13のバージョンを学ぶために公式文書を見たことが理解できません。誰かが一緒に公式文書でコアを要約して、一緒に勉強できればと思います。
📌公式文書は明らかに良い学習資料ですが、分量が膨大で負担になることがあります。経験豊富な先輩が必要な部分をつけてくれたら、時間に比べて高い効率で学習できないでしょうか？今回の講義では、Next.jsの公式文書に基づいてコアコンセプトを要約しました。
🤔実際にどのように書くべきですか？
公式文書を見て従ったが思ったように動作しません。何が問題なのかわかりません。検索をしてみても、Next.js 13が出てきたばかりのせいか、ちゃんとした結果を見つけるのが難しいですね。
📌公式文書に記載されているコードに従うと、思うように動作しない場合に会います。私も講義を準備しながら恥ずかしかったことが何度あります。このレッスンでは、実際に動作するコードを共有します。
この講義を通して得たもの 💎
1. 技術を眺める観点が変わります
多くの技術がそうであるように、Next.jsも問題解決のために世界に登場したと思います。私は講義でコアを伝え、それぞれがツールとしてどんな意味があるのか説明したいと思います。
- Next.jsが世界にいるまで、JavaScriptフレームワークがどのように変化したかを理解できます。
- トラブルシューティングのツールとして、Next.jsが学ぶ価値があるツールであることを理解できます。
2. いつでも取り出せる学習資料ができます。
良い講義は長く頭の中に残ると思います。しかし、私たちの記憶力には限界があります。必要に応じていつでも閲覧できるハンドブックとソースコードを提供して、実用的な助けになりたいです。
- Next.jsの公式ドキュメントでは、コアのみをまとめたハンドブックを提供します。
- 講義で一緒に作成したプロジェクトのソースコードを提供します。
- 質問にできるだけ早く答えてください。受講生が増えれば別のチャンネルを運営します。
何を学びますか？ 📚
合計3つのセクションで構成されています。
セクション1.
なぜNext.jsを学ぶか。
Next.jsが世界にいるまで何が起こったのか見てみましょう。 JavaScriptの登場から、jQuery、AngularJS、Reactなどのツールがどのような問題を解決しようとしたのか理解できる時間で準備しました。当然、Next.jsが登場するようになった背景を知ることになりますよ！
セクション2
Next.js基本学習
Next.jsの公式ドキュメントでコアだけを選びました。 Next.jsが何であるかを見て、Next.js 13で何が変わったのかを見ることができます。新しく導入されたサーバーコンポーネント（Server Component）はもちろん、ファイルシステムベースのルーティング（Routing）、データフェッチ（Data Fetching）、メタデータ（Metadata）まで理解できます！
.png?w=960)
セクション3.
Next.js 手につける
先の章で学んだ内容を実際のコードに移してみる過程です。天気アプリを作って頭の中だけにあった概念を実際に使ってみることができます。天気APIを直接呼び出して、データフェッチ、キャッシング（Caching）、再検証（Revalidating）までしてみて、Next.jsを手に覚えるようになります！
.png?w=960)
参考にしてください📢
実習環境と学習資料についてご案内します！私はMacBook Air M1 8GBメモリモデルを使用しました。
練習環境
- オペレーティングシステムと環境：macOS、Node.js 18.17.0
- 使用ツール：VSCode
- 使用サービス: Vercel , WeatherAPI , TimeAPI
学習資料
講義を聞く前に
- 無料で公開された講義を先に聞いてみることをお勧めします。
- バンクサラダで行ったクリーンコード関連の発表をご覧いただくことも講義スタイルを理解するのに役立つでしょう。
こんな方に
おすすめです
学習対象は
誰でしょう？
Next.jsの主な概念を理解したい人
Reactの最新機能を使ってみたかった方
JavaScriptフレームワークの選択に悩んでいる人
前提知識、
必要でしょうか？
HTML＆amp; CSS
JavaScript
React
TypeScript
1,058
受講生
80
受講レビュー
45
回答
4.8
講座評価
3
講座
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
カリキュラム
全体
22件 ∙ (1時間 54分)
1. Intro:こんにちは
05:06
2. Next.jsを学ぶ理由
07:10
3. Next.jsとは何ですか？
04:23
4. Next.js 13
02:30
6. ルーティング
05:01
7. ページ間を移動
01:54
8. スタイリング
03:30
9. データフェッチ
06:44
10. メタデータ(Metadata)
03:05
講座掲載日:
最終更新日:
受講レビュー
全体
68件
4.9
68件の受講レビュー
- petercha900526
受講レビュー 8
∙
平均評価 4.6
5
45% 受講後に作成私がNext.jsを学ぶときにこのレッスンで始めたら、私ははるかに少ない苦労しました。という考えがずっと私は講義です。講師様の外部講演やYouTubeの映像などを通じて講師様を以前から知っていたのですが、このように講義を出したと言って聞いてみました。 講義を聞いてみると確かに公式文書をしっかり読まず、一応こうすればこういう機能になる！ まるでフレンドリーな学校の先輩が横で話すように説明をしてくれる感じだと聞きやすく、 'use client'ならCSRだと思っていましたが、まさにそうではないと説明して始めている部分で何か人々が見落としやすい点それらをしっかりと満たし、基本基をよく固めることができる良い講義という感じを受けます。
milktea受講レビュー 26
∙
平均評価 4.8
5
91% 受講後に作成1年未満のジュニア開発者です。突然フリーランスの開発者として働くようになったのに。 Next 13基盤プロジェクトなので、この講義だけを見て投入されました。 エッセンシャルに必ず知らなければならない部分を公式文書に基づいてよく説明してくださり、質問に対するまとまった答えではなく明確で詳細な答えを提供してくださって受講生にしてくださる答えをじっくり見ているなら、講義の別冊付録を見ている感じが聞きました。不足した自信を知識で満たせるように誠心誠意まで助けておられるという感じを受けたから。お返しにさせていただくとはまったくないこんな受講評だけですね。 受講に関連した評価ではないか。 もし余裕があれば、予備/ジュニア開発者の方々は講師様のブログポスティングを一度見てみてください。私たちが開発者として悩む霧のような悩みを代わりにまとめて書き留めたようで、読んでみるとどの開発者になるか考えに陥ることもあり、会社と私がお互いを選択する過程を文を通して間接体験することができます。おもしろく読んでみると感情移入になり深く(?)なります。 文を見ても良い開発者であると思われます。 ネカラク配当土のようなタイトルだけを見て自責していた自らに大きな疑問符を投げさせてくれてありがとう。 自分を振り返ると知って、文章を通じて本人の状況や能力などを定義することを知っているハジョウン様のような開発者になるはずだ。と目標を立てましたね。 良い先生です。
- hoho952791
受講レビュー 6
∙
平均評価 4.3
- seaweeddragonvic3619
受講レビュー 1
∙
平均評価 5.0
- stu
受講レビュー 15
∙
平均評価 4.9
期間限定セール、あと6日日で終了
￥2,384
22%
￥3,065
hajoeunの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
![[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)