Zenn
😎

Next.js App Router 入門 調査レポート

に公開
Next.js
初心者向け
Bun
フロントエンド開発
App Router
tech

調査日

2025年4月29日（火）

調査テーマ

Next.js 13以降の新しいApp Router構成を使った基本操作体験

実施環境

  • OS: Windows 11
  • ランタイム: bun v1.2.10
  • Next.js: 15.3.1
  • Node.js: 20.x
  • プロキシ環境: あり

実施内容

プロジェクト作成

  • 作業ディレクトリを作成
  • 以下コマンドでプロジェクト初期化
    bun create next-app@latest .
  • 質問への回答内容
    • TypeScript: Yes
    • ESLint: Yes
    • Tailwind CSS: No
    • src/ディレクトリ: No
    • App Router: Yes
    • Turbopack: No

依存パッケージインストール

  • 初回 bun install でエラー発生（Integrity check failed）
  • bun install --no-cache に切り替えて再試行
  • 正常完了

開発サーバ起動

  • bun dev でローカルサーバ起動
  • http://localhost:3000 にアクセスし、Next.js初期画面を確認

/posts ページ作成

  • app/posts/page.tsx ファイルを新規作成
  • 以下機能を実装
    • メモ入力フォーム
    • Addボタンでリストにメモ追加
    • Deleteボタンでリストからメモ削除

動作確認

  • ブラウザで http://localhost:3000/posts にアクセス
  • メモ追加、メモ削除が正常に動作することを確認

結論

  • bunを使ったNext.js App Routerプロジェクト作成は成功した
  • App Router構成における基本的なページ追加、状態管理、簡単な動作実装ができた
  • bun環境ではキャッシュ不整合によるインストールエラーが起きやすく、--no-cacheオプションを付けた再実行が有効であると確認できた

今後の課題

  • ページ間遷移（リンク機能）の実装体験
  • LocalStorage保存などフロントエンドの状態永続化技術体験
  • SSR（Server Side Rendering）やAPI Routeなどの拡張学習

Discussion