非エンジニアのための、2時間で読み切る入門。
Next.jsを、
専門用語に
振り回されずに。
開発会社の説明やAIの回答に出てくる「App Router」「SSR」「Vercel」。それぞれが何のためにあるのかを、身近なたとえで順番に解説します。各章の終わりに確認問題があり、理解度をその場で確かめられます。
app/page.tsx→/app/company/page.tsx→/companyapp/news/[id]/page.tsx→/news/123こうした「仕組みの地図」を、図と表で一つずつ確認していきます。
読み方ガイド
あなたは、
どれに近いですか?
基本は第1章から順に読むのがおすすめです。時間がない場合や目的がはっきりしている場合は、次の入口から始めてください。
TYPE 2
開発会社やエンジニアと
話す立場にある
提案書や見積もりの内容を理解し、確認すべき点を押さえたい方に。
- SSR・SSGなど作り方の違い
- 公開先・費用・運用の考え方
- 依頼前に確認すべき質問
TYPE 3
AIを使って
自分で作ってみたい
AIへの依頼の質を上げ、出てきたコードを確認できるようになりたい方に。
- フォルダ構成とページの関係
- データと秘密情報の扱い
- AIに伝わる依頼文の例
この教材でできること
こんな悩みは、
ありませんか?
よくある悩み
- 開発会社の説明に「SSR」「Vercel」など分からない言葉が多い
- AIにサイトを作ってもらったが、何が起きているのか分からない
- 公式ドキュメントは英語で、しかも専門的すぎる
- 勉強したいが、まとまった時間が取れない
この教材で解決できます
- 用語を役割で理解:「何のためにあるか」から説明し、用語集でいつでも引ける
- 確認の観点が分かる:AIのコードで見るべき場所を表にまとめて紹介
- 日本語とたとえで解説:厨房と客席、差し込み印刷など身近な例で説明
- 約2時間で完結:1章10〜20分。すき間時間に1章ずつ進められる
章の一覧
仕組みの全体像から、
公開・運用まで順番に。
各章の最後に確認問題が3問あります。答えるとすぐに正誤と解説が表示され、右側に記録が残ります。
- 01Next.jsとは何かBASICS15分未回答
Webサイトが表示されるまでの流れと、React・Next.jsがそれぞれ何を担当しているのかを押さえます。
- 02ページとURLの仕組みROUTING15分未回答
「フォルダを作るとページになる」App Routerの考え方を、実際のフォルダ構成で確認します。
- 03部品とレイアウトCOMPONENTS15分未回答
画面は「部品(コンポーネント)」の組み合わせでできています。コードの読み方の入口もここで押さえます。
- 04画面はどこで作られるかRENDERING20分未回答
本教材でいちばん大切な章です。サーバーとブラウザの役割分担を、レストランの厨房と客席にたとえて整理します。
- 05データの読み書きDATA15分未回答
お知らせ一覧の表示や問い合わせフォームの保存など、データを読み書きする仕組みと、秘密情報の扱い方を学びます。
- 06速さと検索対策PERFORMANCE10分未回答
速く表示され、検索やSNSで見つけてもらうために、Next.jsが用意している仕組みを知ります。
- 07公開と運用DEPLOY15分未回答
手元で作ったサイトをインターネットに公開し、安全に運用し続けるまでの流れを押さえます。
- 08AIと一緒に作るときWITH AI15分未回答
ここまでの知識を、AIへの依頼や開発会社とのやり取りにどう生かすかをまとめます。