| 拡張子 | 意味 | 使う場面 | 主な構文 | 例 |
|---|---|---|---|---|
.js |
通常のJavaScript | 一般的なスクリプト | const x = 1; |
Node.jsやブラウザ |
.jsx |
JS + JSX構文入り | Reactコンポーネント | <div>Hello</div> |
React専用 |
.ts |
TypeScript | 静的型付きJS | const x: number = 1; |
Node.jsやNext.js |
.tsx |
TS + JSX構文入り | React＋TypeScript |
<App /> + 型安全 |
Next.jsでよく使う |
.mjs |
ES Module専用JS | ESM構文（import/export） | import x from 'x' |
next.config.mjsなど |
.cjs |
CommonJS専用JS | 旧式Node.js構文 | require('x') |
古い設定ファイル |
予約ファイル
| 名前 | 種類 | 用途 / 自動的な挙動 |
|---|---|---|
page.tsx / page.jsx |
ファイル | ページ本体（ルートURLに対応） |
layout.tsx / layout.jsx |
ファイル | 共通レイアウト（ネスト継承） |
template.tsx |
ファイル | レイアウトの代替テンプレート（状態を保持しない） |
loading.tsx |
ファイル | ロード中に自動で表示されるUI |
error.tsx |
ファイル | その階層でのエラー表示UI |
not-found.tsx |
ファイル | 404ページを上書き |
default.tsx |
ファイル | Parallel Routes（並列ルート）のデフォルトビュー |
route.ts / route.js |
ファイル | APIルート定義（RESTエンドポイント） |
head.tsx |
ファイル | ページ固有の <head> 要素を定義（※古いmetadata構文推奨） |
metadata.ts / metadata.js |
ファイル | ページやレイアウトのメタデータ（タイトル・OGPなど） |
icon.png / icon.svg |
ファイル | 各階層専用のfavicon（自動ルーティングされる） |
apple-icon.png |
ファイル | Apple専用ホームアイコン |
manifest.json |
ファイル | PWA対応マニフェスト |
sitemap.xml |
ファイル | 自動生成・静的提供されるサイトマップ |
robots.txt |
ファイル | 検索エンジン用robots設定 |
favicon.ico |
ファイル | ルートfavicon（app/直下推奨） |
予約ディレクトリ
| ディレクトリ名 | 特殊ルール / 用途 |
|---|---|
app/ |
App Router のルート（必須） |
api/ |
APIルート定義用ディレクトリ（route.tsを含む） |
_（アンダースコアで始まるフォルダ） |
非ルーティング対象（Private Folder） |
(name)（丸括弧フォルダ） |
Route Group（URLに含まれないグループ） |
[param] |
動的ルート（パスパラメータ） |
[...param] |
キャッチオールルート（残り全部を受け取る） |
[[...param]] |
オプショナルキャッチオール（存在しなくてもOK） |
@slot |
Parallel Routes 用スロット名ディレクトリ |
_components / _lib |
慣例的に「ルート対象外」扱い（Private Folder機能） |
node_modules/ |
npm依存パッケージ領域（Next.jsが自動除外） |
public/ |
静的ファイル公開用ディレクトリ（特殊扱い） |