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

MyMemoWiki

「Next.js」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
63行目: 63行目:
 
*layout.js
 
*layout.js
 
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件
 
*<html>、<body> 要素が存在し、個々のページを埋め込むため chilrenプロパティを引用していることが条件
 +
 +
===ルートパラメータ===
 +
*[名前] : 単一パラメータ
 +
*[...名前] : キャッチオールセグメント
 +
*[[...名前]] : 省略可能なキャッチオールセグメント
 +
 +
{| class="wikitable" style="margin:auto"
 +
|+ 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'] }
 +
 +
|}

2024年10月5日 (土) 03:17時点における版

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'] }