Next.js in your hands - Creating a blog
hajoeun
Get familiar with Next.js by creating a personal blog with Next.js!
Basic
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,061
受講生
83
受講レビュー
47
回答
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
講座掲載日:
最終更新日:
受講レビュー
全体
70件
4.9
70件の受講レビュー
- petercha900526
受講レビュー 8
∙
平均評価 4.6
5
45% 受講後に作成This is a lecture that makes me think, "If I had started with this lecture when I was learning Next.js, it would have been much less frustrating..!" I knew the lecturer from his external lectures and YouTube videos, but I listened to this lecture because he said he would do it. After listening to the lecture, I felt that it covered the shortcomings of the learning method that I had learned only by focusing on practical work, such as not reading the official documentation properly and only learning by doing this and then this function! It was easy to listen to because it felt like a kind senior from school was talking right next to me, and I thought 'use client' was CSR, but he immediately explained that it wasn't, and I felt like it was a good lecture that solidified the basics by filling in the points that people tend to overlook.
milktea受講レビュー 26
∙
平均評価 4.8
5
91% 受講後に作成I am a junior developer with less than 1 year of experience. I suddenly started working as a freelance developer. Since it was a Next 13-based project, I was assigned to it after watching this lecture. The essential parts that I absolutely must know were explained well based on the official documentation, and the answers to questions were not vague but clear and detailed, so when I looked through the answers given to the students, I felt like I was looking at a separate appendix to the lecture. I felt that they were sincerely helping me fill my lack of confidence with knowledge. As a thank you, I have nothing but this insignificant review. This review is not related to the lecture, but. If you have time, I recommend that prospective/junior developers take a look at the instructor's blog posting. It seems like he has collected and written down the foggy worries that we as developers have, and as you read, you will think about what kind of developer you will become, and you can indirectly experience the process of the company and I choosing each other through the writing. It is fun, and as you read, you empathize and become profound(?). Just by reading the article, you can see that you are a good developer. I am really grateful that you made me question myself, who used to blame myself by just looking at titles like Nekaraku Baedangto. I set a goal to become a developer like Hajo Eun who knows how to reflect on herself and define her own situation and abilities through her writing. You are a good teacher.
- hoho952791
受講レビュー 6
∙
平均評価 4.3
- seaweeddragonvic3619
受講レビュー 1
∙
平均評価 5.0
5
32% 受講後に作成When I first started learning next.js, I had a hard time understanding what was being said even when I looked at the official documentation, but it was really helpful that you explained the key points concisely. I have taken many classes at Inflearn, but this is my first time leaving a comment. I hope you will continue to provide great lectures in the future.
- stu
受講レビュー 15
∙
平均評価 4.9
￥3,142
hajoeunの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[Fullstack Introduction] Supabase, 10x Better Than FirebaseCourse Thumbnail](https://cdn.inflearn.com/public/courses/334439/cover/9e628f60-3721-4d03-b36d-a577593b96fd/334439.jpg?f=avif&w=420)
![[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[Revised 3rd Edition] Node.js Textbook - From Basics to Project PracticeCourse Thumbnail](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)