Next.js

React

link

• Reactは、あくまでUI部分のみ
• 本格的なアプリ開発には周辺領域を担うためのフレームワークが必要
• Reactベースのフレームワークとしてデファクトスタンダードと言える存在
• 主なライブラリ
  • ファイルシステムベースの設定レスルーター
  • サーバーコンポーネント
  • データ取得用fetchメソッド
  • リソース組み込みの自動最適化
  • CSSフレームワーク、Tailwind　CSSへの標準対応

導入

newdelhi:Workspaces piroto$ npx create-next-app@latest
Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y) y

✔ What is your project named? … first-nextjs-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.

実行

開発

npm run dev

本番ビルド＋実行

npm run build
npm start

App Router

• React Routerとは異なる独自のルーターを標準で提供
• コンポーネントそのものはReactと変わらない

2種類のルーター

• Pages Router : 旧来から提供されている
• App Router : Next.js 13から導入された新しいルーター(推奨)

App Router

• フォルダベースのルーター
• ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
• page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される