강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Next.js の開始

React を始める際に必ず知っておくべき Next.js フレームワーク。初心者向けに簡単に説明し、実務者が満足するほど詳細な動作原理を理解します。Next.js を一気に解決します。

  • captain
next
캡틴판교
Next.js
React
JavaScript

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

受講後に得られること

  • Next.js 14(最新バージョン)

  • Next.js 実務プロジェクト フォルダ構造

  • Next と React コンポーネントの設計

  • Next.js 実務コーディングのヒント

  • React

  • JavaScript

  • NPM

  • REST API

  • ネットワークと HTTP プロトコル

  • パフォーマンスの最適化

Next.jsをよく使うと聞きますが、どのように学べばいいでしょうか?🤔

Reactプロジェクトを始めるためにほぼ0順位で選択されるNext.jsフレームワーク。Reactもまだよく分からないのに、Next.jsはどのように学べばよいでしょうか?

開発方式が自由なReactにルールを追加し、開発者が気にかけるべきルーティングやパフォーマンスなどを自動的に処理してくれるNext.jsフレームワーク。膨大なNext.js公式ドキュメントの前で一人で道に迷う必要はありません。Next.js公式ドキュメントより理解しやすい日本語教材があるのですから。❤


数年間、初心者の視点から難しい技術を分かりやすく説明してきたキャプテンパンギョが、今度はNext.jsを完全攻略します。初心者に配慮した分かりやすい用語説明と目で直接確認できる動作原理から、実務者を魅了するレンダリング、ネットワーク、パフォーマンス、ハイドレーションなど実務概念の説明まで。Next.js入門講座が皆さんをサポートします。

この講義の特徴

📌 REST APIを連携してショッピングモールサイトを作りながら、Nextの基礎概念から高級概念まですべて体得します。

📌 短時間でコードを速く正確に書く11年目フロントエンド開発者の裏技大公開

📌Chrome開発者ツール、HTTPプロトコル、パフォーマンス最適化など、実戦で必ず知っておくべき知識も一緒にお教えします

📌途中途中で学んだ内容を消化できる実習があちこちに配置されています。

📌 CSR、SSR、Hydration、クライアントナビゲーションなどのすべての概念は、ブラウザを直接開いて一緒に目で見て理解しましょう。

📌いつでもどこでも簡単にアクセスできるウェブサイトベースの講義教材が提供されます。

こんな方におすすめです

Next.jsプロジェクトを始めましょう。

Reactもよく分からないのにNext.jsで会社のプロジェクトをしなければなりません。
開発を簡単にするためには、どのような概念と技術を知っておく必要がありますか?

Reactで就職準備をしています。
求人情報ごとに応募資格に
Next.jsが入っているのですが
会社で実際に求められる能力は何でしょうか?

優秀なフロントエンド開発者は
どのように働いているのか気になります
ネイバー・カカオ・ライン・クーパン・配達の民族で認められる開発者はどのような能力を備えているのでしょうか?
熟練した実務者が知っている知識とノウハウが気になります。

受講後には

  • Next.jsでWebアプリケーションを実装するのが簡単になります。

  • より正確で高速なコードを書くスキルが身につきます。

  • クライアントレベルの知識だけでなく、サーバー、ネットワーク、パフォーマンス最適化についても学ぶことができます。

  • 実務でプロジェクト作成からフォルダ構造化などの全般的なコンベンションまで自信を持って主導できます。

こんな内容を学びます。

実務プロジェクトのフォルダ構造と実務開発環境の設定方法

Next.jsの基本概念に基づいたフォルダ構造設計方法と、ESLint、Prettierを利用してコードタイピングを減らし、開発生産性を向上させる方法を学びます。

React + Next.jsの必須概念と文法

作成したコードの流れを正確に理解できるよう、親切で具体的な図解で説明します。CSR、SSR、Hydrationだけでなく、React、JavaScript必須文法まですべて説明してくれるお得な講義🎁

ネットワーク、HTTP、パフォーマンス最適化に対する深い理解

Webページが描画されるまでのリソース要求とレンダリング過程について、目で直接見せながら説明します。サーバー、CDN、HTTP、パフォーマンス最適化など、初心者の観点から馴染みのない用語はすべて分かりやすく説明いたします

短時間でコードを素早く正確に書く方法と熟練した実務者のショートカット裏技

実務者の重要なスキルの一つであるコーディング実力と実装能力。短時間で多くの機能を正確かつ迅速に実装できるショートカットキーとコーディングの裏技を大公開します🚀

この講義を作った人 👨‍💻

장기효 (캡틴판교)

「Inflearnが出会った人」インタビュー


受講前の参考事項

実習環境

  • オペレーティングシステムおよびバージョン(OS):講義ではMacを使用しますが、Windows関連のショートカットキーもすべて説明します。

  • 使用ツール:VSCode

学習資料

  • いつでも気軽に見ることができるウェブサイト教材が提供されます😄

  • ソースコードを確認できるGitHubリポジトリも提供されます 📘

  • 見ながらより多くの知識を身につけることができる無料教育動画と資料も多数提供されます ❤

前提知識および注意事項

위즈 띠배너 모음
도라 띠배너 모음 (3)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.js を始める初心者

  • React と Next.js を一度に学びたい初心者

  • Next.js の実務開発に興味のあるフロントエンド開発者

  • Next.js に興味のある Web 開発者

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

  • React 基本文法(講師の指導に従って講義を受講することをお勧めします)

  • JavaScript 基本文法

こんにちは
です。

48,960

受講生

4,795

受講レビュー

3,815

回答

4.9

講座評価

19

講座

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각과 고민을 들을 수 있는 곳

カリキュラム

全体

70件 ∙ (7時間 57分)

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

受講レビュー

全体

100件

4.8

100件の受講レビュー

  • minkyungs2님의 프로필 이미지
    minkyungs2

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    This is my first time taking Captain Pangyo's lecture. I am a developer who has been working without a mentor for 3 months. I have taken many lectures, but as others have said, the absorption is really good! I set a goal in a few days with quick breathing and completed the first lecture. Of course, the absorption was good, but ultimately, he said, "I will tell you this in the next lecture.", so I kept taking the next lecture because I was curious. There are many lectures that teach nextjs, but I think it is not easy to find a lecture that teaches why? and arouses curiosity. Ultimately, I think I need to dig into the principles?! In that context, I thought of him as my online mentor and he gave me great tips from the field and told me "why" I should write this code. It was really great. (I might not have been able to find or eat it in other lectures..) In that sense, teacher, please hurry up and bring the next advanced lecture using app router.. Please work without resting.. In the meantime, I will apply what you taught me to my work..

    • captain
      知識共有者

      Oh my.. This is a touching class review. Haha I'm working nonstop. I'll give you a gift when the next lecture comes out! Thank you :)

  • damin2003694581님의 프로필 이미지
    damin2003694581

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    I listened to the lecture well! I look forward to the follow-up lectures :) The key points are key, but the lecture explains each point one by one and the notes that are organized and provided are especially great!

    • captain
      知識共有者

      Thank you for pointing out the special features of the lecture. I will come back with the next lecture soon! :)

  • iamjjoal5302님의 프로필 이미지
    iamjjoal5302

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    As expected of Captain Pangyo! It was a perfect lecture with concise explanations that pinpointed the necessary parts, rich lecture supplementary materials, and a perfect lecture length to maintain focus. (The diction that sticks in your ears and the great voice are a bonus) I was suddenly put in charge of a Next.js project and felt overwhelmed, but this was really helpful. I'll bow in the direction of Pangyo whenever I think of it. Please keep working like a cow! Fighting!

    • modify님의 프로필 이미지
      modify

      受講レビュー 2

      平均評価 5.0

      5

      84% 受講後に作成

      I'm a new developer who suddenly had to do Next.js and was at a loss...ㅜㅜ My position is backend, so I didn't have much experience with front-end frameworks, so I was at a loss as to where to start, but I took the course and it was so much fun at a price that's affordable for a freshman!! (The quality doesn't decrease because it's cheap!!) Some people have mentioned in other reviews that they were disappointed with the details, but I recommend it to those who have some prior learning... Personally, I liked it because it felt like it didn't have any unnecessary details and reminded me of the necessary details!! I'm praying for the advanced version starting today!!

      • nataek2159님의 프로필 이미지
        nataek2159

        受講レビュー 15

        平均評価 3.3

        4

        100% 受講後に作成

        期間限定セール、あと3日日で終了

        ¥26

        22%

        ¥5,475

        captainの他の講座

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

        似ている講座

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