🔼
Next.js 備忘録
拡張子
| 拡張子 | 意味 | 使う場面 | 主な構文 | 例 |
|---|---|---|---|---|
.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 |
共通レイアウト（ネスト継承） |
error.tsx |
その階層でのエラー表示UI |
loading.tsx |
ロード中に自動で表示されるUI |
not-found.tsx |
404ページを上書き |
template.tsx |
レイアウトの代替テンプレート（状態を保持しない） |
route.ts / route.js |
APIルート定義（RESTエンドポイント） |
metadata.ts / head.tsx |
ページ固有の <head> 要素やメタ情報を定義（metadata構文推奨） |
icon.png / icon.svg |
各階層専用のfavicon（自動ルーティングされる） |
apple-icon.png |
Apple専用ホームアイコン |
manifest.json |
PWA対応マニフェスト |
sitemap.xml |
自動生成・静的提供されるサイトマップ |
robots.txt |
検索エンジン用robots設定 |
favicon.ico |
ルートfavicon（app/直下推奨） |
default.tsx |
Parallel Routes（並列ルート）のデフォルトビュー |
予約ディレクトリ
| ディレクトリ名 | 特殊ルール / 用途 |
|---|---|
app/ |
App Router のルート（必須） |
_（アンダースコアで始まるフォルダ） |
非ルーティング対象（Private Folder） |
(name)（丸括弧フォルダ） |
Route Group（URLに含まれないグループ） |
[param] |
動的ルート（パスパラメータ） |
[...param] |
キャッチオールルート（残り全部を受け取る） |
[[...param]] |
オプショナルキャッチオール（存在しなくてもOK） |
@slot |
Parallel Routes 用スロット名ディレクトリ |
_components / _lib |
慣例的に「ルート対象外」扱い（Private Folder機能） |
node_modules/ |
npm依存パッケージ領域（Next.jsが自動除外） |
public/ |
静的ファイル公開用ディレクトリ（特殊扱い） |
Discussion
失礼します。
metadata.jsという規約は無いはずです。api/についても同様です。App Router についてはそのような規約はありません。あくまで慣習です。以下が公式ドキュメントにある仕様です。
ご指摘、めちゃくちゃ助かります！！！ありがとうございます！
いえいえ！少しでもお役に立てたなら幸いです！