メインコンテンツへスキップ
見出し画像

🚀Next.jsコンプリートマスター　第001講　🌐Next.jsとは何か――最初に全体像をつかもう

    経営デザイン 高木会計事務所

    プロローグ

    「Next.jsを勉強してみよう」
    そう思って学習を始めると、いきなり不思議なことが起こります。
    JavaScriptが出てきます。
    Reactが出てきます。
    TypeScriptが出てきます。
    HTMLもCSSも出てきます。
    さらに勉強を進めると、Node.js、HTTP、API、データベース、認証、Git、GitHub、Vercelまで登場します。
    生徒「先生、私はNext.jsを勉強しに来たはずなんですが。」
    先生「はい。」
    生徒「知らない技術が次々と教室へ入ってきます。」
    先生「正常です。」
    生徒「追い出せませんか。」
    先生「全員、あとで必要になります。」
    しかし心配はいりません。
    第001講で、それらを全部覚える必要はありません。
    最初に必要なのは、Next.jsをWeb開発全体の中のどこに置けばよいのかを理解することです。
    今回は難しい機能を覚える講義ではありません。
    まず地図を手に入れます。

    Next.jsとは何か

    Next.js公式ドキュメントでは、Next.jsを**「フルスタックWebアプリケーションを構築するためのReactフレームワーク」**と位置づけています。Reactコンポーネントを使ってUIを作り、Next.jsがさらにWebアプリケーションに必要な機能や最適化を提供します。(Next.js)
    生徒「すでに分からない言葉が二つあります。」
    先生「どれですか。」
    生徒「Reactとフレームワークです。」
    先生「では、そこからほどきましょう。」
    Next.jsを理解するには、まずReactとの関係を知る必要があります。

    Reactは画面を部品として作る

    Reactは、Web画面などのUIを作るためのライブラリです。
    UIとはUser Interfaceの略で、ユーザーが実際に見たり操作したりする部分です。
    たとえば、
    ボタン。
    メニュー。
    検索欄。
    顧客一覧。
    お問い合わせフォーム。
    売上グラフ。
    こうした画面の部品をReactではコンポーネントとして作ります。
    React公式ドキュメントでも、Reactアプリケーションはコンポーネントから構成され、ReactコンポーネントはJavaScript関数として定義できると説明されています。(React)
    生徒「コンポーネントって何ですか。」
    先生「まずはレゴの部品だと思ってください。」
    ヘッダーという部品。
    メニューという部品。
    顧客カードという部品。
    検索フォームという部品。
    それらを組み合わせて一つの画面を作ります。
    Reactの重要な考え方は、大きな画面を小さな再利用可能な部品へ分解して作ることです。
    ただし、ここで注意があります。
    ReactだけでもUIは作れますが、本格的なWebシステムには画面以外にも多くの仕組みが必要です。
    URLをどう管理するのか。
    サーバーで何を処理するのか。
    データをどう取得するのか。
    画像をどう扱うのか。
    データベースへどう接続するのか。
    本番環境へどう公開するのか。
    そこでNext.jsが登場します。

    Next.jsとReactはどちらを選ぶのか

    初心者がよく抱く疑問があります。
    「ReactとNext.jsのどちらを勉強すればよいのか」
    しかし、この二つは単純な競争相手ではありません。
    Next.jsの中でReactを使います。
    大まかな関係は、
    JavaScript
    ↓
    React
    ↓
    Next.js
    と考えると理解しやすくなります。
    ただし「Next.jsはReactの上位互換」という意味ではありません。
    JavaScriptはプログラミング言語です。
    Reactは主にUIを構築するためのJavaScriptライブラリです。
    Next.jsはReactを利用しながら、本格的なWebアプリケーションを構築するための仕組みを提供するフレームワークです。
    生徒「Reactを勉強し終わったらNext.jsへ進むんですか。」
    先生「いいえ。Next.jsを書いている最中もReactを使います。」
    生徒「ではReactの授業は卒業できない。」
    先生「JavaScriptの授業も卒業できません。」
    ここは、このシリーズ全体を通じて非常に重要です。
    今後、
    map()が出てきたらJavaScript。
    useStateが出てきたらReact。
    type Userが出てきたらTypeScript。
    page.tsxという特別なファイル構成が出てきたらNext.js。
    SELECTが出てきたらSQL。
    というように、**「今使っている機能は、どの技術に所属しているのか」**をできるだけ明確にしていきます。

    なぜ所属を区別する必要があるのか

    たとえばNext.jsの記事を読んでいて、次のようなコードに出会ったとします。

    const names = ["Tanaka", "Suzuki", "Takagi"];

const items = names.map((name) => {
  return <li>{name}</li>;
});

    初心者は、
    「Next.jsのmap()という機能を覚えなければ」
    と思うかもしれません。
    しかしmap()はNext.jsの機能ではありません。
    map()はJavaScriptの配列に用意されている機能です。
    ReactやNext.jsのコードの中でもJavaScriptを使うため、当然JavaScriptの機能がたくさん登場します。
    この区別ができると、
    「Next.jsが分からない」
    という漠然とした状態から、
    「JavaScriptの配列処理が分からない」
    という具体的な問題へ変わります。
    何が分からないのかを分類できるだけで、エラー調査や学習は大幅に楽になります。

    ライブラリとフレームワークは何が違うのか

    Reactはよく「ライブラリ」と呼ばれます。
    Next.jsは「フレームワーク」と呼ばれます。
    厳密な境界について最初から難しく考える必要はありません。
    イメージとしては、Reactが工具箱、Next.jsが建築の基本ルールまで含んだ建築システムだと考えてください。
    ReactはUIを作るための強力な道具を提供します。
    Next.jsはさらに、
    どこへページを置くのか。
    URLをどう作るのか。
    サーバーとブラウザで処理をどう分けるのか。
    データをどう取得するのか。
    画像をどう最適化するのか。
    本番用にどうBuildするのか。
    といったWebアプリケーション全体の構造まで扱います。
    Next.js公式も、ReactコンポーネントによってUIを作り、Next.jsが追加機能と最適化を提供すると説明しています。(Next.js)
    生徒「Reactが工具箱なら、Next.jsは工務店ですか。」
    先生「かなり近いです。」
    生徒「プログラミングを始めたはずなのに建設業になりました。」
    先生「1000講後には保守点検まで担当します。」

    「フルスタック」とは何か

    Next.jsの説明には「フルスタック」という言葉が出てきます。
    ここも難しく考えないでください。
    Webシステムには、ユーザーから見える画面だけでなく、その裏側があります。
    たとえば顧客管理システムを考えてみましょう。
    ユーザーがブラウザで会社名を入力します。
    「登録」ボタンを押します。
    入力されたデータがサーバー側へ送られます。
    サーバー側で内容を確認します。
    登録してよいユーザーなのか確認します。
    データベースへ保存します。
    保存結果をブラウザへ返します。
    ユーザーの画面に「登録しました」と表示します。
    つまり、大ざっぱには、
    ブラウザ
    ↓
    Next.jsアプリケーション
    ↓
    サーバー側の処理
    ↓
    データベース
    ↓
    結果を返す
    という流れがあります。
    Webアプリケーションとは、画面だけではなく、ブラウザ・サーバー・データベースなどが協力して動く一つのシステムです。
    このシリーズでは最終的に、この流れを全部扱います。

    Next.jsだけを1000講勉強するわけではない

    シリーズ名は「Next.jsコンプリートマスター」ですが、Next.jsのAPIを1000個暗記するシリーズではありません。
    Next.jsを中心にして、
    HTML。
    CSS。
    JavaScript。
    TypeScript。
    React。
    HTTP。
    API。
    Node.js。
    PostgreSQL。
    認証。
    認可。
    セキュリティ。
    Git・GitHub。
    テスト。
    CI/CD。
    デプロイ。
    ログ。
    監視。
    バックアップ。
    障害対応。
    まで進んでいきます。
    Next.jsを通して、Webシステム全体を理解することがこのシリーズの目的です。
    生徒「最初はWebページを一枚作るくらいだと思っていました。」
    先生「最後は障害から復旧します。」
    生徒「ずいぶん遠くまで行きますね。」
    先生「だから第001講では、まず地図を見るわけです。」

    App Routerを本線にする

    Next.jsを検索すると、
    「App Router」
    「Pages Router」
    という二つの言葉が出てきます。
    2026年9月現在、Next.js公式ドキュメントでは、App Routerを新しいルーターとして説明し、Server Componentsなど新しいReact機能に対応する方式としています。一方でPages Routerも引き続きサポートされています。(Next.js)
    このシリーズではApp Routerを本線として学習します。
    生徒「昔の記事にpagesフォルダが出てくることがあります。」
    先生「それはPages Routerを使っている可能性があります。」
    生徒「同じNext.jsなのに書き方が違うんですか。」
    先生「だから記事の日付や対象バージョンを見る習慣が大切になります。」
    2026年9月20日時点で、Next.js公式ドキュメントのLatest Versionは16.3.5と表示されています。(Next.js)
    ただし、このシリーズで毎回最新番号を暗記する必要はありません。
    変わりやすいバージョン固有の知識より、長く使えるWebの原理を先に理解することが重要です。

    App RouterではフォルダとURLがつながる

    App Routerでは、ファイルやフォルダの配置がURLと深く関係します。
    たとえば、

    app/page.tsx

    はトップページになります。
    URLでいえば、

    /

    です。
    さらに将来、

    app/about/page.tsx

    を作れば、

    /about

    というURLのページを作れます。
    Next.js公式は、この仕組みをfile-system routingとして説明しており、アプリケーションのルートがファイル構成によって決まります。(Next.js)
    生徒「フォルダを作ることがURLを作ることにつながるんですか。」
    先生「そう考えるとApp Routerがかなり見えやすくなります。」
    Next.jsでは、ファイル名やフォルダ構成そのものに意味があります。
    これは今後何度も登場する重要な特徴です。

    サーバーとブラウザという二つの場所

    Next.jsを学ぶと、Server ComponentとClient Componentという言葉が出てきます。
    詳しい説明はまだ先で構いません。
    今日は一つだけ覚えてください。
    Next.jsのコードは、全部がブラウザで動くわけではありません。
    Webアプリケーションには、
    ブラウザ側で行う仕事。
    サーバー側で行う仕事。
    があります。
    たとえばユーザーがボタンを押す操作はブラウザ側と関係します。
    一方で、秘密情報を使ってデータベースへ接続するといった処理は、通常サーバー側で行います。
    生徒「コードなら、どこで動いても同じではないんですか。」
    先生「そこがWeb開発で非常に大切なところです。」
    「このコードはどこで動いているのか」を意識することは、Next.jsを理解するための中心テーマの一つです。
    今後はコードを見るたびに、
    ブラウザなのか。
    サーバーなのか。
    両方に関係するのか。
    を確認していきます。

    では実際にNext.jsを動かしてみよう

    ここから最初の演習です。
    今回は高度なアプリを作りません。
    目標は一つだけです。
    自分のパソコンでNext.jsを起動し、自分が書いた文字をブラウザへ表示する。
    まずターミナルを開きます。
    WindowsならPowerShellやVS Codeの統合ターミナルを利用できます。

    Node.jsのバージョンを確認する

    次のコマンドを入力します。

    node -v

    一行ずつ意味を確認しましょう。
    node
    Node.jsを実行するコマンドです。
    これはNext.jsではありません。
    所属はNode.jsです。
    -v
    version、つまりバージョンを表示するためのオプションです。
    2026年7月更新のNext.js公式Installationでは、必要なNode.jsの最低バージョンを20.9としています。(Next.js)
    たとえば、

    v22.20.0

    のように表示されれば、Node.jsが認識されています。
    バージョン番号そのものは環境によって異なります。
    ここで重要なのは、
    Next.jsを動かす土台としてNode.jsが使われている
    という関係です。

    Next.jsプロジェクトを作る

    次に、作業したいフォルダで次を実行します。

    npx create-next-app@latest nextjs-master

    この一行も分解します。
    npx
    npmパッケージとして提供されるコマンドを実行するために使います。
    これはNode.js・npm側の仕組みです。
    create-next-app
    Next.jsプロジェクトを作成するための公式ツールです。
    ここはNext.jsです。
    @latest
    最新リリースを利用する指定です。
    nextjs-master
    今回作成するプロジェクト名です。
    Next.js公式でも、最も簡単に新しいアプリケーションを作る方法としてcreate-next-appを案内しています。現在の推奨デフォルトではTypeScript、ESLint、Tailwind CSS、App Routerなどが設定されます。(Next.js)
    この連載ではTypeScript＋App Routerを基本構成として進めます。
    Tailwind CSSについては別の講義できちんと整理します。
    今は「プロジェクトを自動で準備してくれるコマンド」と理解すれば十分です。

    プロジェクトの中へ移動する

    作成が終わったら、次を入力します。

    cd nextjs-master

    cd
    はChange Directoryの略で、現在いるフォルダを変更するコマンドです。
    これはNext.jsの命令ではありません。ターミナルの基本操作です。
    生徒「こういうコマンドも全部Next.jsだと思っていました。」
    先生「今の段階で区別できれば十分です。」

    開発サーバーを起動する

    次のコマンドを実行します。

    npm run dev

    npm
    Node.js環境で利用するパッケージ管理の仕組みです。
    run
    package.jsonに登録されたスクリプトを実行します。
    dev
    開発用サーバーを起動するためのスクリプトです。
    現在のNext.js公式ドキュメントでは、next devが開発サーバーを起動し、TurbopackがデフォルトのBundlerとして利用されます。(Next.js)
    開発サーバーが起動したら、ブラウザで、

    http://localhost:3000

    へアクセスします。
    localhost
    は、自分自身のコンピューターを表します。
    3000
    はポート番号です。
    今、自分のパソコンの中でWebサーバーが動き、そのWebサーバーへブラウザからアクセスしているわけです。
    この仕組みは後の講義で詳しく扱います。

    app/page.tsxを探してみよう

    VS Codeでプロジェクトを開きます。
    App Routerを使っている場合、重要なファイルがあります。

    app/page.tsx

    srcディレクトリを利用する設定にした場合は、

    src/app/page.tsx

    です。
    このファイルがトップページを担当します。
    今回は中身を簡単にしてみましょう。

    export default function Home() {
  return (
    <main>
      <h1>Next.jsコンプリートマスター</h1>
      <p>第001講を学習中です。</p>
    </main>
  );
}

    保存してブラウザを確認します。
    「Next.jsコンプリートマスター」
    「第001講を学習中です。」
    と表示されれば成功です。
    しかし、表示されたことより「なぜ表示されたのか」を理解する方が重要です。
    ここから一行ずつ読みます。

    1行目――export default function Home()

    export default function Home() {

    一つずつ分解します。
    function
    これはJavaScriptです。
    関数を定義するキーワードです。
    Home
    関数名です。
    Reactではこの関数をコンポーネントとして使っています。
    Reactコンポーネントの名前は大文字から始めます。React公式でも、コンポーネントはJavaScript関数であり、名前を大文字から始める必要があると説明されています。(React)
    ()
    関数へ渡す引数を書く場所です。
    今回は何も受け取っていないため中身は空です。
    {
    関数の処理がここから始まることを示します。
    そして、

    export default

    があります。
    export defaultもNext.jsだけの構文ではありません。
    React公式もexport defaultについて標準的なJavaScript構文であり、React固有のものではないと説明しています。(React)
    つまり、この一行には、
    JavaScriptの関数。
    JavaScriptのモジュール構文。
    Reactコンポーネント。
    そしてNext.jsがページとして利用する仕組み。
    が重なっています。
    一行のコードでも、複数の技術が協力していることがあります。

    returnはJavaScript

    次の行です。

    return (

    returnはJavaScriptです。
    関数から値を返します。
    Reactコンポーネントでは、画面へ表示したい内容を返すために使います。
    続く(と)は、複数行のJSXをまとめて書くために使われています。
    React公式でも、returnの次の行から複数行でマークアップを書く場合は、括弧で囲む例が示されています。(React)

    mainはHTMLなのかReactなのか

    次です。

    <main>

    mainという要素自体はHTMLの要素です。
    しかし、ここは普通の.htmlファイルではありません。
    page.tsxの中です。
    ReactではJavaScriptの中にHTMLに似たマークアップを書くためにJSXという構文を利用します。
    React公式では、JSXをJavaScriptの構文拡張で、JavaScriptファイル内にHTML風のマークアップを書ける仕組みとして説明しています。(React)
    TypeScriptを組み合わせたファイルでは拡張子が.tsxになります。
    生徒「見た目はHTMLなのにHTMLそのものではない？」
    先生「そこがReactを始めたときの最初の違和感です。」
    JSXはHTMLによく似ていますが、HTMLそのものではありません。
    今後、その違いも少しずつ学びます。

    h1を読む

    次です。

    <h1>Next.jsコンプリートマスター</h1>

    h1
    はHTMLの見出し要素です。
    <h1>
    が開始タグです。
    Next.jsコンプリートマスター
    が表示する文字です。
    </h1>
    が終了タグです。
    ここでは、
    要素そのものの意味はHTML。
    JSXとしてReactコンポーネント内へ書いている仕組みはReact。
    それをapp/page.tsxというページとして扱っているのはNext.js。
    となります。
    「これはHTMLかReactかNext.jsか」の答えが一つとは限らないこともあります。
    それぞれが違う役割を担当しているからです。

    pを読む

    次です。

    <p>第001講を学習中です。</p>

    p
    はparagraph、段落を意味するHTML要素です。
    ブラウザには、
    「第001講を学習中です。」
    と表示されます。
    この文字列を変更すれば、画面の表示も変わります。

    mainを閉じる

    </main>

    最初に書いた、

    <main>

    に対応する終了タグです。
    JSXでは、要素を正しく閉じる必要があります。

    returnを閉じる

    );

    ここでreturnしているJSXのまとまりが終わります。
    ;
    は文の終了を表します。
    JavaScriptでは省略できる場合もありますが、このシリーズではコードの読みやすさも意識して扱っていきます。

    関数を閉じる

    最後です。

    }

    最初の、

    function Home() {

    で始まった関数を閉じています。
    たった数行ですが、この中にはすでに、
    HTML。
    JavaScript。
    TypeScript。
    React。
    Next.js。
    という複数の技術が関係しています。
    Next.jsを学ぶときに「全部Next.jsの文法だ」と考えないこと。これが第001講の非常に重要なポイントです。

    自分で一か所変更してみる

    コードは写して終わりにしません。
    次の部分を変更してください。

    <h1>Next.jsコンプリートマスター</h1>

    たとえば、

    <h1>はじめてのNext.jsアプリ</h1>

    へ変更します。
    保存します。
    ブラウザを確認します。
    表示が変われば成功です。
    生徒「変更したのは文字だけですよ。」
    先生「第001講では、それで十分です。」
    生徒「もっと派手なアプリを作らないんですか。」
    先生「初日に認証付き顧客管理システムを作らせる講座は、数講後に生徒が認証できなくなります。」
    ここで体験しているのは、
    コードを書く
    ↓
    保存する
    ↓
    Next.jsが変更を処理する
    ↓
    ブラウザへ反映される
    という開発の基本サイクルです。
    小さく変更して結果を確認する習慣は、今後どれだけ大きなシステムを作るようになっても変わりません。

    わざとエラーを起こしてみる

    今度は意図的にコードを壊します。

    <h1>はじめてのNext.jsアプリ</h1>

    の終了タグを消して、

    <h1>はじめてのNext.jsアプリ

    として保存してみてください。
    エラーになります。
    ここで、
    「失敗した」
    と考えないでください。
    エラーは、コンピューターから届く原因調査の手掛かりです。
    元の、

    <h1>はじめてのNext.jsアプリ</h1>

    へ戻せば正常になります。
    このシリーズでは、正しいコードを見るだけでなく、
    エラーを起こす。
    エラーメッセージを見る。
    原因を考える。
    直す。
    もう一度動かす。
    という練習も行います。
    実務で重要なのは、一度もエラーを出さないことではなく、エラーから原因を特定して修正できることです。

    Reactを全部勉強してからNext.jsへ進むべきか

    生徒「ここまで聞くと、JavaScriptとReactを完全に勉強してからNext.jsを始めた方がいい気がします。」
    先生「完全になる日を待っていると、なかなかNext.jsへ来られません。」
    Next.js公式ドキュメントも、HTML、CSS、JavaScript、Reactへの基本的な理解があると学びやすいとしています。(Next.js)
    しかし、このシリーズでは、
    JavaScriptを全部終える。
    Reactを全部終える。
    TypeScriptを全部終える。
    それからNext.jsへ進む。
    という方法は取りません。
    Next.jsを本線として進み、必要になった技術をその都度戻って学習します。
    map()が出てきた。
    JavaScriptのmap()を学ぶ。
    propsが出てきた。
    Reactのpropsを学ぶ。
    型エラーが出てきた。
    TypeScriptを学ぶ。
    Flexboxが必要になった。
    CSSへ戻る。
    SQLが必要になった。
    PostgreSQLとSQLを学ぶ。
    この方法なら、
    「なぜこれを勉強するのか」
    が分かります。
    生徒「Next.jsの授業中にJavaScriptの補習が始まるんですね。」
    先生「はい。でも目的の分からない予習より、必要になった補習の方が身につきやすいのです。」

    1000講後に目指す場所

    このシリーズのゴールは、
    「Next.jsのサンプルコードをコピーできるようになる」
    ことではありません。
    自分でWebシステムを設計する。
    必要なコンポーネントを考える。
    コードを書く。
    データベースを設計する。
    認証と認可を実装する。
    テストする。
    Gitで履歴を管理する。
    GitHubで開発を管理する。
    本番Buildする。
    デプロイする。
    独自ドメインで公開する。
    ログを確認する。
    監視する。
    バックアップする。
    障害が起きれば原因を調べる。
    復旧する。
    アップデートを継続する。
    そこまで進みます。
    「作った」で終わらず、「安全に動かし続けられる」ところまでがWebシステム開発です。

    第001講で一番覚えてほしいこと

    生徒「今日のコードを暗記しておいた方がいいですか。」
    先生「暗記しなくて構いません。」
    生徒「第001講から覚えなくていい？」
    先生「代わりに、考え方を覚えてください。」
    今日もっとも重要なのは、次の二つです。
    Next.jsは、Reactを使ってフルスタックWebアプリケーションを構築するためのフレームワークである。
    そして、
    Next.jsのコードの中では、HTML、CSS、JavaScript、TypeScript、React、Next.jsなど複数の技術が協力している。
    今後知らないコードが出てきたら、すぐ暗記しようとしないでください。
    まず、
    「これは何の技術だ？」
    と考えます。
    次に、
    「これはどこで動いている？」
    と考えます。
    さらに、
    「なぜこの処理が必要なのか？」
    と考えます。
    この三つの問いを持っておけば、Next.jsは単なる暗記科目ではなくなります。

    今回の要点

    ・Next.jsは、フルスタックWebアプリケーションを構築するためのReactフレームワークである。
    ・ReactはUIをコンポーネントという部品として構築するためのライブラリである。
    ・Next.jsとReactは競合するものではなく、Next.jsの中でReactを使う。
    ・このシリーズではApp Routerを本線として学ぶ。
    ・map()はJavaScript、useStateはReact、page.tsxの規約はNext.jsというように、技術の所属を区別する。
    ・Next.jsのコードがブラウザで動くのか、サーバーで動くのかを意識する。
    ・app/page.tsxはApp Routerにおけるトップページになる。
    ・最初の演習では、Next.jsを起動して自分の文字をブラウザへ表示した。
    ・エラーは失敗ではなく、原因を調べるための情報である。
    ・Next.jsそのものを暗記するのではなく、Next.jsを通してWeb開発全体を理解していく。
    第001講では、まだ小さなページしか作っていません。
    しかし、
    自分でコードを書く → Next.jsが処理する → Webサーバーが応答する → ブラウザに表示される
    という最初の一本の線がつながりました。
    この一本の線を、第1000講までかけて、React、TypeScript、API、PostgreSQL、認証、セキュリティ、GitHub、CI/CD、デプロイ、監視、バックアップ、障害復旧へ伸ばしていきます。
    Next.jsを暗記するのではありません。Next.jsを通して、Webがどう動いているのかを理解していきましょう。

    あなたへのおすすめ