| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

Next.js

提供: MyMemoWiki
2024年10月5日 (土) 03:18時点におけるPiroto (トーク | 投稿記録)による版 (→‎ルートパラメータ)
ナビゲーションに移動 検索に移動

React


  • 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

Start next js.png

本番ビルド+実行

npm run build
npm start

App Router

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

2種類のルーター

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

App Router

  • フォルダベースのルーター
  • ルート定義不要、フォルダ階層に準じてリクエストパスとコンポーネント(.jsファイル)との対応関係が決まる
  • page.jsはファイル名も固定でフォルダー構造だけでリクエストパスが決定される
アプリ共通の外枠
  • layout.js
  • <html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件

ルートパラメータ

  • [名前] : 単一パラメータ
  • [...名前] : キャッチオールセグメント
  • \[\[...名前\]\] : 省略可能なキャッチオールセグメント
App Routerのルートパラメータ
フォルダ階層 対応リクエスト パラメータ
/app/hoge/[id]/page.js /hoge/001 { id : '001' }
/app/foo/[...keys]/page.js /foo/aaa/bbb { keys: ['aaa', 'bbb'] }
/app/bar/...keys/page.js /bar {}
/bar/aaa/bbb { keys: ['aaa', 'bbb'] }