Next.js

React

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

本番ビルド＋実行

npm run build
npm start

App Router

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