第1章から読む →

非エンジニアのための、2時間で読み切る入門。

Next.jsを、
専門用語に
振り回されずに。

開発会社の説明やAIの回答に出てくる「App Router」「SSR」「Vercel」。それぞれが何のためにあるのかを、身近なたとえで順番に解説します。各章の終わりに確認問題があり、理解度をその場で確かめられます。

第2章 ページとURLの仕組み
フォルダの並び = ページのURL
app/page.tsx→/
app/company/page.tsx→/company
app/news/[id]/page.tsx→/news/123

こうした「仕組みの地図」を、図と表で一つずつ確認していきます。

8章1章あたり10〜20分
24問各章に確認問題3問
約2時間で全体像をつかむ
0行コードを書く必要なし

読み方ガイド

あなたは、
どれに近いですか?

基本は第1章から順に読むのがおすすめです。時間がない場合や目的がはっきりしている場合は、次の入口から始めてください。

TYPE 1

Next.jsという言葉を
初めて聞いた

Webサイトの仕組みから知りたい方に。

  • Webサイトが表示される流れ
  • ReactとNext.jsの関係
  • 全体像と主要な用語

おすすめ:第1章から順にすべて(約2時間)

第1章から読む

TYPE 2

開発会社やエンジニアと
話す立場にある

提案書や見積もりの内容を理解し、確認すべき点を押さえたい方に。

  • SSR・SSGなど作り方の違い
  • 公開先・費用・運用の考え方
  • 依頼前に確認すべき質問

おすすめ:第1章 → 第4章 → 第7章 → 第8章(約65分)

第4章「画面はどこで作られるか」を読む

TYPE 3

AIを使って
自分で作ってみたい

AIへの依頼の質を上げ、出てきたコードを確認できるようになりたい方に。

  • フォルダ構成とページの関係
  • データと秘密情報の扱い
  • AIに伝わる依頼文の例

おすすめ:第2章 → 第5章 → 第8章(約45分)

第2章「ページとURLの仕組み」を読む

学習の進み具合

確認問題に答えると、
ここに記録されます。

0/ 8 章 確認済み

記録はこのブラウザの中だけに保存されます。別の端末やブラウザには引き継がれません。

第1章から始める

この教材でできること

こんな悩みは、
ありませんか?

よくある悩み

  • 開発会社の説明に「SSR」「Vercel」など分からない言葉が多い
  • AIにサイトを作ってもらったが、何が起きているのか分からない
  • 公式ドキュメントは英語で、しかも専門的すぎる
  • 勉強したいが、まとまった時間が取れない

この教材で解決できます

  • 用語を役割で理解:「何のためにあるか」から説明し、用語集でいつでも引ける
  • 確認の観点が分かる:AIのコードで見るべき場所を表にまとめて紹介
  • 日本語とたとえで解説:厨房と客席、差し込み印刷など身近な例で説明
  • 約2時間で完結:1章10〜20分。すき間時間に1章ずつ進められる

章の一覧

仕組みの全体像から、
公開・運用まで順番に。

各章の最後に確認問題が3問あります。答えるとすぐに正誤と解説が表示され、右側に記録が残ります。

  1. 01
    Next.jsとは何かBASICS

    Webサイトが表示されるまでの流れと、React・Next.jsがそれぞれ何を担当しているのかを押さえます。

    15分未回答
  2. 02
    ページとURLの仕組みROUTING

    「フォルダを作るとページになる」App Routerの考え方を、実際のフォルダ構成で確認します。

    15分未回答
  3. 03
    部品とレイアウトCOMPONENTS

    画面は「部品(コンポーネント)」の組み合わせでできています。コードの読み方の入口もここで押さえます。

    15分未回答
  4. 04
    画面はどこで作られるかRENDERING

    本教材でいちばん大切な章です。サーバーとブラウザの役割分担を、レストランの厨房と客席にたとえて整理します。

    20分未回答
  5. 05
    データの読み書きDATA

    お知らせ一覧の表示や問い合わせフォームの保存など、データを読み書きする仕組みと、秘密情報の扱い方を学びます。

    15分未回答
  6. 06
    速さと検索対策PERFORMANCE

    速く表示され、検索やSNSで見つけてもらうために、Next.jsが用意している仕組みを知ります。

    10分未回答
  7. 07
    公開と運用DEPLOY

    手元で作ったサイトをインターネットに公開し、安全に運用し続けるまでの流れを押さえます。

    15分未回答
  8. 08
    AIと一緒に作るときWITH AI

    ここまでの知識を、AIへの依頼や開発会社とのやり取りにどう生かすかをまとめます。

    15分未回答

読むだけなら、約2時間。

さあ、Next.jsの
全体像をつかみましょう。