開発/10 min read/February 1, 2025

Danylo Kabanov

Chief Technology Officer

#Next.jsアプリケーションのパフォーマンス最適化

パフォーマンスは後付けではなく、基本的な設計上の考慮事項です。ここでは、スケーラブルで高速なNext.jsアプリケーションを構築するためのアプローチを紹介します。

##レンダリング戦略の選択

Next.jsは複数のレンダリング戦略を提供しており、各ページの要件に基づいて最適な方法を選択できます。

###静的サイト生成（SSG）

ビルド時にページを生成し、CDNでキャッシュします。最高のパフォーマンスを実現します。

tsx

1// pages/blog/[slug].tsx
2export async function generateStaticParams() {
3  const posts = await getBlogPosts()
4  return posts.map((post) => ({
5    slug: post.slug,
6  }))
7}
8
9export default async function BlogPost({ params }: { params: { slug: string } }) {
10  const post = await getPostBySlug(params.slug)
11  return <Article post={post} />
12}

###サーバーサイドレンダリング（SSR）

リクエストごとにページを生成します。パーソナライズされたコンテンツに最適です。

tsx

1// app/dashboard/page.tsx
2export const dynamic = 'force-dynamic'
3
4export default async function Dashboard() {
5  const userData = await fetchUserData()
6  return <DashboardLayout data={userData} />
7}

###インクリメンタル静的再生成（ISR）

静的ページを定期的に再生成します。動的コンテンツとパフォーマンスのバランスを取ります。

tsx

1export const revalidate = 3600 // 1時間ごとに再検証
2
3export default async function ProductPage() {
4  const products = await fetchProducts()
5  return <ProductList products={products} />
6}

##画像の最適化

Next.jsのImageコンポーネントは、自動的に画像を最適化します。

tsx

1import Image from 'next/image'
2
3function Hero() {
4  return (
5    <Image
6      src="/hero.jpg"
7      alt="Hero image"
8      width={1200}
9      height={600}
10      priority // LCPのためにプリロード
11      placeholder="blur"
12      blurDataURL="data:image/jpeg;base64,..."
13    />
14  )
15}

###主要な機能

自動WebP/AVIF変換：モダンなフォーマットで配信
レスポンシブ画像：デバイスに応じて最適なサイズ
遅延読み込み：ビューポート外の画像は遅延読み込み
プレースホルダー：ブラー効果で視覚的な連続性

##コード分割と動的インポート

必要なコードのみをロードすることで、初期バンドルサイズを削減します。

tsx

1import dynamic from 'next/dynamic'
2
3// コンポーネントの動的インポート
4const DynamicChart = dynamic(() => import('@/components/Chart'), {
5  loading: () => <ChartSkeleton />,
6  ssr: false, // クライアントサイドのみでレンダリング
7})
8
9function Analytics() {
10  return (
11    <div>
12      <h1>分析ダッシュボード</h1>
13      <DynamicChart />
14    </div>
15  )
16}

##フォント最適化

Next.jsのフォント最適化機能を使用して、フォントの読み込みを改善します。

tsx

1import { Inter, Noto_Sans_JP } from 'next/font/google'
2
3const inter = Inter({
4  subsets: ['latin'],
5  display: 'swap',
6})
7
8const notoSansJP = Noto_Sans_JP({
9  subsets: ['japanese'],
10  display: 'swap',
11  weight: ['400', '700'],
12})
13
14export default function RootLayout({ children }: { children: React.ReactNode }) {
15  return (
16    <html lang="ja" className={`${inter.className} ${notoSansJP.className}`}>
17      <body>{children}</body>
18    </html>
19  )
20}

##キャッシング戦略

効果的なキャッシングでサーバーの負荷を削減します。

tsx

1// データキャッシング
2const cachedData = await fetch('https://api.example.com/data', {
3  next: { revalidate: 3600 } // 1時間キャッシュ
4})
5
6// ルートキャッシング
7export const dynamic = 'force-static'
8export const revalidate = 3600

##パフォーマンスモニタリング

Web Vitalsを測定して、実際のユーザーエクスペリエンスを追跡します。

tsx

1// app/layout.tsx
2import { Analytics } from '@vercel/analytics/react'
3import { SpeedInsights } from '@vercel/speed-insights/next'
4
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html>
8      <body>
9        {children}
10        <Analytics />
11        <SpeedInsights />
12      </body>
13    </html>
14  )
15}

##実践的なチェックリスト

✅ 適切なレンダリング戦略を選択する ✅ 画像を最適化する（Next.js Imageを使用） ✅ コンポーネントを動的にインポートする ✅ フォントを最適化する ✅ 効果的なキャッシング戦略を実装する ✅ バンドルサイズを分析する ✅ Core Web Vitalsを測定する

##結論

Next.jsは優れたパフォーマンスを実現するための強力なツールを提供しています。これらのベストプラクティスに従うことで、高速で、スケーラブルで、ユーザーに優しいアプリケーションを構築できます。

***

Next.jsアプリケーションの最適化についてサポートが必要ですか？お問い合わせください。

Next.jsReactパフォーマンスWeb開発

Next.jsアプリケーションのパフォーマンス最適化