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 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などの非同期通信コードの不要となり、例えばコンポーネントからデータベースを操作するにも直感的なコードを記述できる
現時点ではα版

有効化

next.config.mjs

const nextConfig = {
    experimental: {
        serverActions: true
    }
};

実装

ルートレイアウト

アプリ内のリンクにはLinkコンポーネントを利用

import Link from "next/link";

規定で以下のようなコンポーネントが用意されており、アプリ内リソースを効率的に利用できる

MyMemoWiki

Next.js

目次

導入

実行

開発

本番ビルド＋実行

App Router

2種類のルーター

App Router

アプリ共通の外枠

ルートパラメータ

Tailwind CSS

サーバーアクション

有効化

実装

ルートレイアウト

アプリ内のリンクにはLinkコンポーネントを利用

案内メニュー

検索