「Next.js」の版間の差分
ナビゲーションに移動
検索に移動
| 67行目: | 67行目: | ||
*[名前] ： 単一パラメータ | *[名前] ： 単一パラメータ | ||
*[...名前] : キャッチオールセグメント | *[...名前] : キャッチオールセグメント | ||
| − | * | + | *<nowiki>[[...名前]]</nowiki> : 省略可能なキャッチオールセグメント |
{| class="wikitable" style="margin:auto" | {| class="wikitable" style="margin:auto" | ||
| 78行目: | 78行目: | ||
| /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] } | | /app/foo/[...keys]/page.js || /foo/aaa/bbb || { keys: ['aaa', 'bbb'] } | ||
|- | |- | ||
| − | | /app/bar/[[...keys]]/page.js || /bar || {} | + | | /app/bar/<nowiki>[[...keys]]</nowiki>/page.js || /bar || {} |
|- | |- | ||
| 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] } | | 〃 || /bar/aaa/bbb || { keys: ['aaa', 'bbb'] } | ||
|} | |} | ||
2024年10月5日 (土) 03:19時点における版
- 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はファイル名も固定でフォルダー構造だけでリクエストパスが決定される
アプリ共通の外枠
- layout.js
- <html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件
ルートパラメータ
- [名前] ： 単一パラメータ
- [...名前] : キャッチオールセグメント
- [[...名前]] : 省略可能なキャッチオールセグメント
| フォルダ階層 | 対応リクエスト | パラメータ |
|---|---|---|
| /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'] } |
© 2006 矢木浩人
