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

今、なぜNext.jsですか？

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

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

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

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

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

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の公式ドキュメントを参照してください。
• 質問の回答に加えて補充が必要だと判断されたときに補強映像を更新する予定です。