inflearn logo
inflearn logo

Next.js はじめ方(feat. 地図サービス開発)

Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。

難易度 初級

受講期間 無制限

Next.js
Next.js
SEO
SEO
vercel
vercel
ssr
ssr
ssg
ssg
Next.js
Next.js
SEO
SEO
vercel
vercel
ssr
ssr
ssg
ssg
날개 달린 동전

講座 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

マーケティングパートナーズ

講座 추천하고 성장과 수익을 만들어 보세요!

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

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

4.5

5.0

김효신

60% 受講後に作成

講義時間は4時間と短く見えますが、実際にコード打つ時間が含まれていないので(早送りで見せたり、すでに作っておいたコードを見せながら説明する形です)実際には勉強時間が長くかかります。しかし、私はむしろそれでいいです! ㅋㅋ何か不要な部分の時間は短くしてくれて、コアだけ教えてくれる講義なので、一人で勉強することをお勧めします。素敵な講義を作ってくれてありがとう。

5.0

콩팥팥죽

100% 受講後に作成

一行感想:大きな期待なしに決済するがこの講義が良いと感じる 決済ゲージ:他の講義の決済がありますが、業務の半分になっていない新規はモダンなブラウザ環境に進むことで必要な時期になり、既存の決済講座を見るのに長すぎて退屈で短いものを探して目次見て決済する

 良かった点 1. ブラウザを開いてデバッグしながら原理を知らせて深い勉強になった(単純実装ではなく深い勉強ができた) 2. 不要な説明なしでnext.jsに焦点を当てる(scss、css.module、react、キャッシュの背景知識など) 3. 教授法が良かった 
ブランチをチェックアウトしながらコメントを削除し、いくつかの比較を示し、違いと効率的に使用するための方法を直接示しています(違いと活用法をさらに説明しませんでした) 4. 価格が恩恵
 これほどクオリティにこの価格あまりに恵者だと思われる。 5. 質問に対する回答がとても詳細 
これまで時間を使って答えをしてくれると?と感じるほどだった 6. tailwindを使うX
 スタイリングのためのスタイルを覚えてhtmlタグにスタイリングするのはとても不便でした。 7. 公式文書の内容も一緒に見てくれて私が直接見なければならない費用が減少 8. seo関連の内容 よくわからないので苦しくて飛ぶのに思ったより簡単に学べるし、要約も上手くいく 9. Web アクセシビリティを考慮した html コード作成をなぜすべきかを知る 個人的に追加したいこと 1. vscodeからmonorepoでnext.jsを使用するときのデバッグ設定は簡単ではないので、これも教えてください。 (デバッグ設定というのはブレークポイントと言うことです。

5.0

JC

31% 受講後に作成

実際のNext.jsが生成したファイルまで覗いて、レンダリング方法を説明してくれたことは、Next.jsの動作を理解するのに大きな助けとなりました。また、地図ページを作成するプロセスを詳しく見て、コース中に使用されたさまざまなライブラリに関する情報や開発のヒントをたくさん手に入れることができました。 Reactの基礎をある程度知っているとき、この講義を聞くと、実用的なウェブサイトを自分で作ることができる段階まで進むのに大きな助けになりそうです!

受講後に得られること

  • Next.jsの基本構造と様々なAPI

  • Next.jsで地図ウェブサービス制作

  • Next.js プロジェクト 公開、検索エンジン登録、各種最適化

先進のFE開発者のためのNext.js!
店舗マップサービスを作成し、簡単かつ楽しく。

マップサービスの作成 - 展開 - 最適化まで
Next.js 一度に始める


Next.jsで作成されたWebサービスのコードを見たい場合


バックエンドコードなしでフロントエンド技術でWebサービスを最初から最後まで完成するプロセスを知りたい場合


SSR/SSG/CSRなど、さまざまな最適化方法について疑問がある場合

Next.js 学びたいフロントエンド開発者なら!

Next.js 入門/初級段階のフロントエンド開発者のための講義です。
バックエンドコードなしでNext.jsでサポートされているさまざまなAPIを使用してマップサービスを簡単に開発することで、必須のNext.jsの仕組みとAPIの両方を学ぶことができます。

今、なぜNext.jsですか?

Next.jsは、優れた開発者エクスペリエンス、簡単で直感的なAPI、さまざまな最適化をサポートするReactフレームワークです。 SSR/SSG/CSR方式を積載適所に使用でき、開発者の利便性を考慮した最適化機能もサポートします。

その間、Next.jsでいくつかのプロジェクトを進めながら、Next.jsの利点が目に入りました。今後、フロントエンド陣営でのより速い成長が期待されるNext.jsをご紹介いたします。


学習負担は減り、
概念はより確実に。

地図サービスでAからZまで

マップサービスを作成し、開発中に不可欠なNext.jsの仕組みとAPIの両方を学ぶことができます。 Next.js 12とNext.js 13の両方に含まれるnext / link、next / imageなどのAPIを両方のバージョンで学習し、v13の利点を理解します。

フロントエンド開発の実力をよもぎ

講義に従って学習する過程で、UI開発(HTML / CSS)、WebパフォーマンスとWebアクセシビリティ、デプロイ、検索エンジンの登録など、フロントエンド開発者として知っておくべき基本概念まで一緒に学ぶことができます。

学習者を考えた講義

講義進行のためのソースコードを授業別にブランチで提供します。また、すべての授業映像に字幕をサポートし、内容に従うのが難しくないように制作しました。

講義は更新されます

追加の説明が必要な部分について補強を進めます。 Next.js 13に関するニュースについてもレッスンの更新を進める予定です。

店舗マップサービスを作成して学ぶNext.js API 10ポイント ✅

  1. next/linkにマップページ/フィードバックページを移動する
  2. next/imageでロゴ画像/店舗画像を最適化
  3. next/scriptでマップスクリプトを読み込む
  4. API Routes で店舗データを読み込む
  5. getStaticPropsでマップページをプリレンダリングする
  1. getStaticPathsですべての店舗の動的ルートをプリレンダリングする
  2. getServerSidePropsからフィードバックページデータを読み込む
  3. Next.js 12と13のnext / link、next / imageなどのAPIの違い
  4. LighthouseによるWebパフォーマンスチェックとWebアクセシビリティ、SEOの改善
  5. VercelによるNext.jsプロジェクトのデプロイ

学習カリキュラム📚

👉講義で作成するマッププロジェクトのプレビュー(リンク)

Section 0: 開発環境設定

  • 本格的な内容を学習する前に、Next.jsの基本設定を行います。
  • create-next-appでプロジェクトを起動し、eslint、prettierを設定します。

Section 1: Data Fetching について

  • Next.jsのさまざまなデータフェッチ方法を学びます。 (SSR/SSG/CSR)
  • next build 結果と開発者ツールの [ネットワーク] タブを使用して、Next.js の page transition 最適化の原理を理解します。
  • next/link と next/router を学習します。

Section 2: Header UI の作成

  • ロゴ画像を読み込むためにnext / image APIを学びます。
  • Next.js 13 next/imageとNext.js 12 next/legacy/imageの容量最適化と機能を学習します。
  • セクション1で学んだことに基づいて地図ページとフィードバックページをルーティングします。

セクション3:マップUIの作成

  • マップスクリプトを読み込むためにnext / script APIを学びます。
  • next/routerを使用してURLに状態を保存する方法を学びます。
  • Sprite marker image でマーカーアイコンを描画します。
  • map, marker の click event を処理します。
  • SWRを利用して簡単に店舗データをグローバル状態で管理します。

Section 4: 店舗詳細ページの作成

  • 店舗詳細ページの動的ルートを作成し、getStaticPaths APIの使い方を学びます。
  • 店舗詳細UIを実装します。
  • next/routerを利用して店舗詳細ページと地図ページをリンクします。

第5章:LighthouseでWebパフォーマンスを確認する

  • Chrome Lighthouseを使用してウェブパフォーマンスを確認します。
  • Webパフォーマンス、Webアクセシビリティ、SEOを改善します。
  • _documentまたはnext-seoライブラリを使用してHTMLヘッドを埋めます。

セクション6:Vercelとしてデプロイする

  • 完成したウェブサイトをvercelとして配布します。
  • next-sitemap ライブラリを使用して robots.txt と sitemap.xml ファイルを生成します。
  • ネイバーサーチアドバイザーとGoogle Search Consoleにサイトを登録します。
  • Google Analyticsを使用してください。

Section 7: プロジェクトの仕上げ

  • Next.js API Routesで店舗データに応答するGET APIを作成します。
  • フィードバックページでは、Firebase Cloud Firestoreにデータを読み書きする方法について説明します。
  • マップサービスの作成プロジェクトを完了します。

第8章:質問の回答と補強

  • 講義内容の中で補足説明が必要な場合や重要な質問がある場合に補強を進めます。
  • Next.js 13についてさらに説明が必要な場合は、補強を進めます。

Next.jsでサービスと製品を開発し、得られたヒントをお届けします。

私はスタートアップ4年目のフロントエンドリーダーとして働き、Next.jsでメインプロダクトとホームページを開発しました。さらに、Next.jsでWebゲームサービスを開発し、JUNCTION ASIA 2022 Track 3などを受賞した経験、Next.js T3 Stackを活用したウェブサービスでKAIST SPARCS HACKATHON 2などを受賞した経験があります。これまでNext.jsでプロジェクトを進め、知り合ったメリットとノウハウをより多くの方々にご紹介させていただきたいです🙂


Q&A 💭

Q. Next.jsをなぜ学ぶべきですか?

既存のフロントエンド開発フレームワークの中で開発者の経験が良く、APIが直感的で多様な最適化をサポートしてくれると思います。これまで、さまざまな技術の長所と短所をトレードオフしてスケールした場合、Next.jsは彼らの長所だけを選び、APIとして提供する方向を追求します。そして何よりも継続的にアップデートが行われているため、今後ますます多くの場所で導入されます。

Q. 講義の難易度はどのくらいですか?

Next.js入門を目指して制作し、ソースコード、映像、字幕に沿って進むと、自然にプロジェクトが完成するように進めます。講義ごとにブランチが用意されているので、実力に応じて講義を越えたり、また戻ることができます。 Reactに関する基本的な知識(jsx文法、useState / useEffect hookなど)が必要です。

Next.jsが初めての場合は、次の手順でNext.jsを起動することをお勧めします。

  1. 講義と提供されたコードを見て、全体の流れを学びます。
  2. コードを自分の方法で変更して改善してみる。
  3. 独自のNext.jsプロジェクトを完成する。

Q. クラスでは、Next.js以外にどのライブラリを使用しますか?

TypeScript、ESlint/Prettier、SWR、next-seo、next-sitemap、sass(scss)、react-icons、copy-to-clipboard、@types/navermaps、firebase(Cloud Firestore) を使用します。コアライブラリ(TypeScript、scss)を除く残りの部分は、サービスの実装に最小限に使用されます。追加のUIライブラリやCSS-in-JSは使用しません。

💾受講前の注意

  • 講義はNext.js 13.0.7 version, pages directoryに基づいて行われます。
  • 理論と実践は1:2の比重で行われます。実践の過程で、単純なUI実装は簡単に説明し、理論的に学んだNext.jsの概念を中心に説明します。
  • IDEはJetBrainsのWebStorm、Package Managerはyarnを使用します。 VSCodeやnpmを使用しても困る場合はお問い合わせください。
  • React FrameworkであるNext.jsに関する講義であるため、Reactに関するプレイヤーの知識が必要です(jsx文法、useState / useEffect hookなど)
  • scssを使用してください。 CSS-in-JSライブラリ(emotion、styled-components)は使用しません。
  • React、yarn(npm)に加えて、TypeScriptとGitの基礎知識が必要です。
  • 状態管理ライブラリとしてSWRを使用します(Next.jsと同じようにVercelチームによって作成された状態管理ライブラリ)。学習に負担がかからないように、最小限のグローバルステートフルに使用します。
  • クラスごとのブランチを含む完全なソースコードを提供します。付属のソースコードを見て映像に集中していくことをおすすめします。 (画面上のコードを同じように書く方法はよくあります。)さらに、Next.jsの公式ドキュメントを参照してください。
  • 質問の回答に加えて補充が必要だと判断されたときに補強映像を更新する予定です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.jsを学んでみたい方

  • ウェブサービス開発過程の全体像を把握したい方々

  • 地図サービスを作ってみたい方々

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

  • React(jsx 文法, useState/useEffect 使用法)

  • git 使い方

  • yarn(またはnpm)使い方

  • TypeScript 構文

こんにちは
vroomfanです。

1,043

受講生

50

受講レビュー

87

回答

4.5

講座評価

2

講座

こんにちは。
スタートアップで4年間フロントエンドエンジニアとして働いています。
React、Next.js、地図、チャート、UIライブラリなどを扱っています。

ポートフォリオ

もっと見る

カリキュラム

全体

45件 ∙ (4時間 7分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

46件

4.5

46件の受講レビュー

  • shan님의 프로필 이미지
    shan

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    ありがとうございます。よく聞きました。講義をした方についても気になって探してみました。本受けながらフロント勉強させていただきます。

    • dkfmwpsxm님의 프로필 이미지
      dkfmwpsxm

      受講レビュー 24

      平均評価 4.3

      5

      100% 受講後に作成

      一行感想:大きな期待なしに決済するがこの講義が良いと感じる 決済ゲージ:他の講義の決済がありますが、業務の半分になっていない新規はモダンなブラウザ環境に進むことで必要な時期になり、既存の決済講座を見るのに長すぎて退屈で短いものを探して目次見て決済する

 良かった点 1. ブラウザを開いてデバッグしながら原理を知らせて深い勉強になった(単純実装ではなく深い勉強ができた) 2. 不要な説明なしでnext.jsに焦点を当てる(scss、css.module、react、キャッシュの背景知識など) 3. 教授法が良かった 
ブランチをチェックアウトしながらコメントを削除し、いくつかの比較を示し、違いと効率的に使用するための方法を直接示しています(違いと活用法をさらに説明しませんでした) 4. 価格が恩恵
 これほどクオリティにこの価格あまりに恵者だと思われる。 5. 質問に対する回答がとても詳細 
これまで時間を使って答えをしてくれると?と感じるほどだった 6. tailwindを使うX
 スタイリングのためのスタイルを覚えてhtmlタグにスタイリングするのはとても不便でした。 7. 公式文書の内容も一緒に見てくれて私が直接見なければならない費用が減少 8. seo関連の内容 よくわからないので苦しくて飛ぶのに思ったより簡単に学べるし、要約も上手くいく 9. Web アクセシビリティを考慮した html コード作成をなぜすべきかを知る 個人的に追加したいこと 1. vscodeからmonorepoでnext.jsを使用するときのデバッグ設定は簡単ではないので、これも教えてください。 (デバッグ設定というのはブレークポイントと言うことです。

      • syda071337님의 프로필 이미지
        syda071337

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        本当に名講義です。 東急を基にnextの特徴を床から慎重に説明してくれます。 おかげで、英語の文書を読んで曖昧だった概念をきれいに理解することができました。今後SSRの特徴と長所をよく生かして開発できるようです。 開発から配布、検索エンジンに登録する方法とSEO、最適化まで阪急に教えてくれた方が良かったです。 Next@13のlayoutの概念も追加講義で出てくることを楽しみにしています!

        • rhwkd50127644님의 프로필 이미지
          rhwkd50127644

          受講レビュー 1

          平均評価 5.0

          5

          76% 受講後に作成

          Next.jsの基本を構築するために聞いたが、Next.jsのスキルが増えました。ありがとう

          • tlsgkdals713087님의 프로필 이미지
            tlsgkdals713087

            受講レビュー 6

            平均評価 5.0

            5

            78% 受講後に作成

            next13について本当に詳しく教えてください 私が欲しかった講義!!!! ありがとうございます。

            似ている講座

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

            ¥5,372