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

MyMemoWiki

「Next.js」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
91行目: 91行目:
  
 
==サーバーアクション==
 
==サーバーアクション==
 +
*Next.js内蔵の仕組み
 +
*ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
 +
*サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
 +
*現時点ではα版

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

React

4815619484.09.MZZZZZZZ.jpg 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

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

Tailwind CSS

  • https://tailwindcss.com/
  • ユーティリティファーストをコンセプトに開発されたCSSフレームワーク
  • ユーティリティを組み合わせてデザインを作るので独自のスタイルを作りやすく細かな調整もしやすいメリット
  • 標準のサイズ、カラーなどは用意されている

サーバーアクション

  • Next.js内蔵の仕組み
  • ページコンポーネント、イベントハンドラー、<form<要素のaction属性などからサーバーコードを呼び出す仕組み
  • サーバーとのやりとりに際し、fetchなどの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
  • 現時点ではα版
「https://www.typea.info/tips_/index.php?title=Next.js&oldid=35303」から取得

© 2006 矢木浩人