最近、Next.jsで開発し始めたので復習がてらまとめ。
Next.js とは
Next.jsは、Reactベースのウェブ開発フレームワーク。
ウェブ開発フレームワークとは：
Webアプリケーションの開発プロセスを簡素化し、効率化するために、様々な機能やツールを用意しているソフトウェア。
主な仕様
-
サーバーサイドレンダリング (SSR):
ページリクエストごとにサーバーでHTMLを生成する -
静的サイト生成 (SSG):
ビルド時にHTMLを生成する -
ファイルベースのルーティング:
ファイルシステムに基づいてルーティングを自動的に設定する -
自動コード分割:
各ページはそのページに必要なものだけを読み込み、パフォーマンスを向上させる -
画像最適化:
組み込みのコンポーネントにより、レスポンシブな画像を提供する -
API Routes:
サーバーレス関数を作成し、APIエンドポイントを簡単に構築できる -
TypeScriptサポート:
TypeScriptを標準でサポートしている
App RouterとPages Routerの違い
Next.js 13以降では、App Router (app ディレクトリ) が推奨されるルーティングシステムとなっている。
Pages Router (pages ディレクトリ) は引き続き使用できるが、App Routerはより多くの機能とパフォーマンスの向上が提供されている。
App Router (app ディレクトリ)
-
React Server Components (RSC) をサポート:
サーバー上でレンダリングされるコンポーネントを使用することで、クライアントへのJavaScriptの配信量を削減し、パフォーマンスを向上させる。 -
ネストされたレイアウト:
コンポーネントの階層構造を反映した柔軟なレイアウトを簡単に作成できる。 -
サーバーコンポーネントによるデータフェッチ:
サーバーコンポーネント内で非同期にデータを取得し、効率的にクライアントに配信できる。 -
ストリーミング:
コンテンツを段階的にレンダリングし、ユーザー体験を向上させる。 -
レイアウト、ローディングステート、エラーハンドリングの改善:
より直感的で宣言的な方法でこれらの機能を実装できる。
Pages Router (pages ディレクトリ)
- クライアントサイドレンダリング中心 (SSR/SSGも可能):
ページ全体がクライアントサイドでレンダリングされるが、getServerSidePropsまたはgetStaticPropsを使用してサーバーサイドレンダリングまたは静的サイト生成を行うこともできる。 - シンプルな構造:
ファイルベースのルーティングに基づいたシンプルな構造。
ディレクトリ構造例
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── api/
│ └── hello/
│ └── route.ts
├── public/
│ └── images/
├── components/
├── styles/
├── lib/
├── next.config.js
└── package.json
新機能と使用例 (Next.js 13 以降)
1. Server Components (RSC)
// app/page.tsx
async function Page() {
const data = await fetchData();
return <div>{data}</div>;
}
export default Page;
2. 新しいルーティングシステム (App Router)
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }) {
return <h1>Blog Post: {params.slug}</h1>;
}
3. TurboPack (Next.js 13のデフォルト)
TurboPackはNext.js 13のデフォルトのバンドラーとなり、Webpackに代わる高速なビルド体験を提供。
まとめ
今回は、Next.jsの基本的な内容についてまとめました。
開発を進める中で、いい情報があれば、改めてまとめます。