メインコンテンツへスキップ
Nexify
ホーム
リファレンス
練習
学習管理
検索
Next.js ビジュアライザー
ファイル・ディレクトリをクリックして役割を確認できます。
ディレクトリ構造
レンダリング比較
▶
フォルダをクリックして展開/折りたたみ
📄
ファイルをクリックで説明を表示
app/
App Routerのルート
layout.tsx
ルートレイアウト(全ページ共通)
詳細 ▸
page.tsx
/ のページコンポーネント
詳細 ▸
loading.tsx
ローディングUI(自動Suspense)
詳細 ▸
error.tsx
エラーUI("use client"必須)
詳細 ▸
not-found.tsx
404ページ
詳細 ▸
globals.css
グローバルCSS
詳細 ▸
dashboard/
/dashboard の URLセグメント
layout.tsx
/dashboard 配下の共通レイアウト
詳細 ▸
page.tsx
/dashboard のページ
settings/
/dashboard/settings
[slug]/
動的セグメント
page.tsx
/任意の値 のページ
詳細 ▸
(marketing)/
ルートグループ(URLに影響しない)
layout.tsx
マーケティング用レイアウト
詳細 ▸
about/
/about
api/
API Routes
users/
/api/users