TypeScriptとNext.jsの基本文法へ
この節で学ぶこと
この節では、第2章で扱ってきた Next.js の開発環境構築 を、知識の断片ではなく ひとつの流れ として整理します。
Next.js の公式ドキュメントでは、導入の中心として create-next-app、Project Structure、TypeScript、ESLint、Module Path Aliases、開発サーバ起動が並んでいます。
第2章で整理した全体像
Next.js を動かす前に必要だったもの
第2章の出発点は、Next.js はいきなりブラウザだけで始めるものではなく、Node.js を前提とした開発環境の上で動く という理解でした。
現在の Next.js 公式では、最低 Node.js バージョンは 20.9 とされています。また、最短の導入方法として create-next-app が案内されており、これが TypeScript、ESLint、Module Path Aliases などの初期設定をまとめて整えます。
ここで大切だったのは、「Node.js」「Next.js」「TypeScript」「ESLint」を全部同じ種類のものだと思わないことでした。
Node.js は実行基盤、Next.js は React ベースのフレームワーク、TypeScript は型を使った安全性の補強、ESLint は静的解析ツールです。
これらが分かれて見えると、開発環境構築は暗記ではなく配置図として理解しやすくなります。
TypeScript 公式は TypeScript を “JavaScript with syntax for types” と説明し、ESLint 公式はコードの一貫性とバグ回避のためのツールだと説明しています。
create-next-app が担っていた役割
第2章の中核は create-next-app でした。Next.js の公式では、これが新しい Next.js アプリを作る最も速い方法であり、推奨設定を自動で整える CLI だと説明されています。Quick start の流れは非常に明快で、プロジェクト作成、フォルダ移動、開発サーバ起動、http://localhost:3000 の確認、app/page.tsx の編集という順番です。
つまり、第2章で学んだのは「プロジェクトを作るコマンド」ではなく、Next.js の公式な入口です。そこから TypeScript、ESLint、プロジェクト構造、開発サーバ、初回ページ編集までが一気につながります。この一連の流れを知っているだけで、これから別の新規案件や実験用アプリを立ち上げるときの心理的なハードルがかなり下がります。
ファイルとフォルダの見方
app、public、src の役割
第2章では、Next.js プロジェクトを開いたときに最初に読むべき構造として app、public、src を確認しました。
Next.js 公式では、app は App Router の中心、public は静的ファイル置き場、src は optional なアプリケーションソースフォルダとして説明されています。
src を使う場合は src/app または src/pages へ移すのが公式の流儀です。
この理解が重要なのは、「どこに何を書くか」が見えないと、どんな文法を覚えても不安が残るからです。
app/page.tsx が / に対応する画面、public が画像などの公開ファイル、src がソースコード整理用、という区別が分かるだけで、Next.js の構造はかなり素直に見えるようになります。
package.json、tsconfig.json、eslint.config.mjs
初期構造の中でも、設定ファイルの役割は特に重要でした。package.json はプロジェクトの scripts と依存関係の中心、tsconfig.json は TypeScript の設定、eslint.config.mjs は ESLint v9 以降の flat config です。ESLint 公式では、flat config が v9 以降の既定形式になっています。Next.js の TypeScript ドキュメントでは、TypeScript を追加すると tsconfig.json が推奨設定付きで整えられると説明されています。
ここで身につけたかったのは、全部を暗記することではありません。「設定はこのファイル群に集まる」 という感覚です。これがあると、今後何か不具合が起きたときにも、「設定を見るならどこか」が見当付きます。これは初心者にとって、とても大きな前進です。
TypeScript、ESLint、Path Alias の位置づけ
TypeScript は安全性の土台
Next.js は built-in TypeScript support を持ち、新規プロジェクト作成時に必要パッケージと適切な設定を自動で整えます。
既存プロジェクトでも .ts / .tsx に変えて next dev や next build を動かせば、必要な依存関係と tsconfig.json が追加されます。
第2章で見たとおり、TypeScript の役割は「書き方を難しくすること」ではなく、実行前に気づけることを増やすことです。
関数の引数や props の型を明確にするだけでも、読みやすさと保守性が大きく変わります。これは今後コンポーネント分割やデータ処理が増えるほど効いてきます。
type ProfileProps = {
name: string
}
export default function Profile({ name }: ProfileProps) {
return <p>{name}</p>
}
ESLint は品質の土台
ESLint は、コードの問題や一貫性の乱れを実行前に検出するための静的解析ツールです。ESLint 公式は、一貫性の向上とバグ回避を主目的として説明しています。
加えて、ESLint v9 では flat config が既定です。Next.js 16 では next lint が削除され、eslint-config-next を使う flat config ベースの構成が標準です。
第2章で重要だったのは、ESLint を「怒る道具」と見ないことでした。たとえば未使用変数、危険な書き方、Next.js らしくない書き方を早めに見つけることで、後の修正コストを下げられます。
特に Next.js の eslint-config-next/core-web-vitals は、多くのプロジェクトに推奨される土台です。
import { defineConfig } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
export default defineConfig([...nextVitals])
Path Alias は可読性の土台
Next.js の導入ドキュメントは Module Path Aliases を初期設定の一部として扱っており、create-next-app でも import alias を選べます。
@/* は典型的な既定値です。これにより、深い相対パスではなく、基準が統一された import を書けるようになります。
この技術の本質は、見た目をきれいにすることではなく、プロジェクト全体で import の基準を揃えることです。
ファイル移動や構造変更があっても、相対パスの ../../../ を大量に直す場面を減らせます。今後アプリが大きくなるほど、ここで学んだ意味が効いてきます。
import Button from '@/components/Button'
import { fetchUser } from '@/lib/fetchUser'
開発サーバと確認の流れ
dev サーバの意味
Next.js 公式では、Quick start の基本として pnpm dev または npm run dev を使い、http://localhost:3000 を開いてアプリを確認する流れが示されています。
Turbopack は現在 Next.js に組み込まれた Rust 製の incremental bundler で、ローカル開発体験の高速化に使われます。
第2章では、ここで単に「起動できた」で終わらせず、app/page.tsx を編集し、保存し、ブラウザで変化を確認する ところまでを重視しました。
これにより、コード・サーバ・ブラウザが1本の流れとしてつながります。開発とは、このループを何度も回すことだからです。
pnpm dev
export default function Page() {
return <h1>初回確認OK</h1>
}
環境変数の基本
.env と公開範囲
第2章では .env 自体を中心にした節も扱いましたが、まとめとして押さえたいのは、設定値には公開してよいものと、してはいけないものがある ということです。
Next.js のトップレベルファイル一覧にも .env と .env.local が含まれており、これらはプロジェクト構造の一部です。
今後 API キーや URL を扱うようになると、環境変数は必ず出てきます。そのとき大切なのは、値を置くことよりも 境界線を意識すること です。
ここは今後の章でさらに実感が強くなる部分ですが、第2章でその存在を知っておくことには意味があります。
ここまでで自分に残したい感覚
覚えるより、見分けられることが大事
第2章全体で本当に大事なのは、コマンドや設定値を丸暗記することではありません。
むしろ次のように、役割を見分けられることです。
- これは実行基盤の話か
- これはフレームワークの話か
- これは型安全性の話か
- これは静的解析の話か
- これは import の整理の話か
- これはプロジェクト構造の話か
この切り分けができると、学習は一気に楽になります。Next.js の Getting Started も、Installation、Project Structure、TypeScript などを分けて整理しています。つまり、第2章の設計自体が公式の学習構造と相性がよいのです。
今の自分にとっての意味
初心者の段階では、「まだ何も作れていない」と感じることがあります。
けれど、第2章を通して身につけたのは、作るための作業場を自分で立ち上げる力です。
これはとても大きいです。新しいプロジェクトを作り、開発サーバを起動し、構造を読み、型や lint の土台を確認できる人は、すでに最初の一歩をかなり越えています。
Next.js は lower-level tools を自動設定して、開発者がプロダクトづくりに集中できるようにするフレームワークだと公式でも説明されています。
次章への接続
ここから先で何が変わるのか
第2章までは、いわば 道具箱と作業机を整える段階 でした。
次章以降では、その上で実際にコンポーネントを書き、props を渡し、ページを分け、状態やデータを扱う話へ入っていきます。
第2章で app/page.tsx が / に対応すること、TypeScript が built-in であること、ESLint が品質を支えることを確認したので、次からは「書いたものがどう動くか」により集中しやすくなります。
言い換えると、第2章は地味ですが、ここを通っている人ほど次章の理解が安定します。
なぜなら、文法や部品の話をするときに、「そのコードはどこに置くのか」「どう実行するのか」「どう確認するのか」がすでに見えているからです。これは、学習を途中で投げ出しにくくする大きな差です。
練習問題
問1
Next.js の現行公式ドキュメントで、新しいアプリを最も速く作る方法として案内されているものはどれですか。
A. create-next-app
B. next publish
C. next scaffold-manual
D. react-only-init
答え
A
解説
Next.js の Installation ページでは、新しい Next.js アプリを最も速く作る方法として create-next-app が案内されています。
問2
app、public、src の役割の組み合わせとして正しいものはどれですか。
A. app は画像置き場、public は型定義、src は必須のビルド成果物
B. app はルーティング中心、public は静的ファイル、src は optional なソース格納場所
C. app は npm 設定、public は ESLint 設定、src はデータベース
D. app は lock ファイル、public は secrets、src は CSS 専用
答え
B
解説
Next.js の Project Structure では、app は App Router、public は静的アセット、src は optional application source folder と説明されています。
問3
現在の Next.js 16 系において正しい説明はどれですか。
A. next lint が lint の標準入口である
B. next lint は削除され、ESLint CLI ベースで扱う
C. ESLint は使えない
D. TypeScript は外部プラグインなしでは使えない
答え
B
解説
Next.js の ESLint 設定ページでは、Next.js 16 から next lint が削除されたと説明されています。ESLint v9 では flat config が既定です。
問4
TypeScript について、Next.js 公式の説明として正しいものはどれですか。
A. TypeScript は非対応である
B. built-in TypeScript support があり、新規作成時に必要設定を自動で整える
C. JavaScript プロジェクトでは絶対に使えない
D. TypeScript は public フォルダに書く
答え
B
解説
Next.js の TypeScript ドキュメントでは、built-in TypeScript support があり、新しいプロジェクト作成時に必要パッケージと設定を自動で整えると説明されています。
問5
Path Alias の目的として最も適切なものはどれですか。
A. 画像を圧縮する
B. import の基準をそろえて、相対パスの読みにくさを減らす
C. データベース接続を暗号化する
D. .env を自動生成する
答え
B
解説
Next.js の導入ドキュメントでは Module Path Aliases を初期設定の一部として扱い、@/* のような alias を使えるようにしています。これにより深い相対パスを整理しやすくなります。
まとめ
第2章で本当に身につけたかったのは、Next.js の開発環境を 説明された状態 ではなく、自分で扱える状態 にすることでした。create-next-app でプロジェクトを作り、dev サーバを起動し、app/page.tsx を編集し、TypeScript・ESLint・Path Alias・構造の意味を大まかに見分けられるようになったなら、この章の目標はかなり達成できています。
ここまで来ると、次に学ぶ文法や UI 実装は、もう空中戦ではありません。
どこに書くか、どう動かすか、何で確認するかが見えているので、コードが少しずつ自分の手に馴染んできます。地味ですが、ここを通った人ほど先で強いです。Next.js の公式が Getting Started をここまで丁寧に分けているのも、その順序に意味があるからです。
参考文献
- Next.js Documentation, Getting Started.
- Next.js Documentation, Getting Started: Installation.
- Next.js Documentation, Getting Started: Project Structure.
- Next.js Documentation, TypeScript.
- Next.js Documentation, File-system conventions:
srcDirectory. - Next.js Documentation, File-system conventions:
publicFolder. - ESLint Documentation, Getting Started.
- ESLint Documentation, Configuration Migration Guide.
- ESLint Documentation, Configuration Files.
- Next.js Documentation, Turbopack.