손에 익는 Next.js - 블로그 만들기
하조은
Next.js로 개인 블로그를 만들며 Next.js를 손에 익혀봐요!
Basic
Next.js, React, 블로그
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,054
受講生
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件の受講レビュー
- Peter Cha
受講レビュー 8
∙
平均評価 4.6
5
45% 受講後に作成내가 Next.js를 배울 때 이 강의로 시작했으면 훨씬 덜 답답했을텐데..! 라는 생각이 계속 나는 강의입니다. 강사님의 외부 강연과 유튜브 영상 등을 통해 강사님을 이전부터 알고 있었는데 이렇게 강의를 내셨다고 해서 들어보게 됐어요. 강의를 들어보니 확실히 공식 문서를 제대로 읽지 않고, 일단 이렇게 하면 이런 기능이 된다!식의 실무 위주로만 배웠던 학습법의 단점들이 커버되는 느낌입니다. 마치 친절한 학교 선배가 옆에서 이야기 하듯이 설명을 해주는 느낌이라 듣기도 편했고, 'use client'면 CSR인줄 이때까지 알았는데 바로 아니라고 설명해주고 시작하는 부분에서 뭔가 사람들이 간과하기 쉬운 점들을 탄탄하게 채워가며 기본기를 잘 다질 수 있는 좋은 강의라는 느낌을 받습니다.
밀크티受講レビュー 26
∙
平均評価 4.8
5
91% 受講後に作成1년미만 주니어 개발자입니다. 갑작스레 프리랜서 개발자로 일하게 되었는데. Next 13기반 프로젝트여서 이 강의만 보고 투입되었습니다. 에센셜하게 반드시 알아야 하는 부분들을 공식문서 토대로 잘 설명해주시고, 질문에 대한 두루뭉술한 대답이 아닌 명확하고 상세한 답변을 제공해주셔서 수강생에게 해주시는 답변들을 주르륵 보고있노라면, 강의의 별책부록을 보고있는 느낌이 들었습니다. 부족한 자신감을 지식으로 채울 수 있도록 성심성의껏 도와주고 계신다는 느낌을 받았기에. 답례로 드릴 것이라곤 보잘것 없는 이런 수강평뿐이네요. 수강과 연관된 평은 아니나. 혹시 여유되신다면 예비/주니어 개발자분들은 강사님의 블로그 포스팅을 한번 훑어보시면 좋겠습니다. 우리가 개발자로서 고민하는 안개같은 고민을 대신 모아서 적어 놓은 것 같기도하고, 읽다보면 어떤 개발자가 될지 생각에 빠지게 되기도 하며, 회사와 내가 서로를 선택하는 과정을 글을 통해 간접체험 할수 있습니다. 재밌고 읽다보면 감정이입이 되서 심오(?)해집니다. 글만 봐도 좋은 개발자이심이 보입니다. 네카라쿠배당토같은 타이틀만 보며 자책하던 스스로에게 큰 물음표를 던지게 해주셔서 정말 감사합니다. 스스로를 돌아볼 줄 알고 글을 통해 본인의 상황과 능력 등을 정의할 줄 아는 하조은님 같은 개발자가 되어야겠노라-. 하고 목표를 세웠네요. 좋은 스승님이십니다.
- 오일
受講レビュー 6
∙
平均評価 4.3
- jinho kim
受講レビュー 1
∙
平均評価 5.0
- 공부하자
受講レビュー 15
∙
平均評価 4.9
￥3,009
hajoeunの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338045/cover/01k1cvnt514nzd42eadka09p64?f=avif&w=420)
![[리뉴얼] React로 NodeBird SNS 만들기Course Thumbnail](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS CoreCourse Thumbnail](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
