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

MyMemoWiki

Next.js

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

React


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


導入

  1. newdelhi:Workspaces piroto$ npx create-next-app@latest
  2. Need to install the following packages:
  3. create-next-app@14.2.14
  4. Ok to proceed? (y) y
  5.  
  6. What is your project named? first-nextjs-app
  7. Would you like to use TypeScript? No / Yes
  8. Would you like to use ESLint? No / Yes
  9. Would you like to use Tailwind CSS? No / Yes
  10. Would you like to use `src/` directory? No / Yes
  11. Would you like to use App Router? (recommended) No / Yes
  12. Would you like to customize the default import alias (@/*)? … No / Yes
  13. Creating a new Next.js app in /Users/piroto/Workspaces/first-nextjs-app.

実行

開発

  1. npm run dev

Start next js.png

本番ビルド+実行

  1. npm run build
  2. 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プロパティを引用していることが条件