Next.js

• Reactのフレームワーク
• サーバとクライアントの両方を受け持つ
  • Node.jsサーバを立てられるため、サーバサイドの処理が可能
    • npm run devで開発
    • npm run startで本番運用
  • 静的HTMLを書き出すこともできる
    • その場合はNode.jsで行っている処理は使えない
• npx create-next-app@latestでプロジェクト作成
  • App Routerなし
    • _app.js, _document.jsでテンプレート的に使い回す処理を記述できる
      • _app.jsは全体に共通する処理を書く
      • _document.jsはクライアントサイドではレンダーされない
        • onClickなどのイベントはここには書かない
        • メタデータなど文書構造を共通化する
        • Html, Head, Mainコンポーネントがそれぞれhtmlタグと対応
  • App Routerあり
    • layout.jsのRootLayoutが_app.js, _document.jsを置き換える
    • メタデータはlayout.jsかpage.jsに書く
• サーバーコンポーネント
• クライアントコンポーネント
• Intercepting Routes

技術