メインコンテンツまでスキップ

7. Performance

Next.jsは、デフォルトでパフォーマンスを最適化するためのさまざまな機能を提供しています。これらの機能を活用することで、アプリケーションの速度とユーザー体験を向上させることができます。

画像の最適化​

Next.jsのnext/imageコンポーネントは、画像の自動最適化を提供します。これにより、画像のサイズを自動的に調整し、WebPなどの最適な形式で配信します。

使用例​

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Optimized Image Example</h1>
      <Image
        src="/path/to/image.jpg"
        alt="Example Image"
        width={500}
        height={300}
        layout="responsive"
      />
    </div>
  );
}

動的インポート​

Next.jsは、動的インポートをサポートしており、必要なときにのみモジュールをロードすることで、初期ロード時間を短縮します。

使用例​

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false, // クライアントサイドでのみロード
});

export default function Home() {
  return (
    <div>
      <h1>Dynamic Import Example</h1>
      <DynamicComponent />
    </div>
  );
}

Code Splitting​

Next.jsは、デフォルトでコードスプリッティングを行い、アプリケーションの各ページに必要なコードのみをロードします。これにより、初期ロード時間が短縮されます。

使用例​

特定の設定は不要で、Next.jsは自動的にコードスプリッティングを実行します。

AMPサポート​

Next.jsは、AMP（Accelerated Mobile Pages）をネイティブでサポートしています。AMPを使用することで、モバイルデバイスでのページのロード時間を大幅に短縮できます。

使用例​

  1. AMPページの作成：

    // pages/amp.js
    export const config = { amp: true };

    export default function AmpPage() {
      return (
        <div>
          <h1>My AMP Page</h1>
          <p>This is an AMP page.</p>
        </div>
      );
    }

  2. AMPコンポーネントの使用：

    Next.jsは、next/ampモジュールを使用してAMP専用コンポーネントを提供します。

    import { Amp } from 'next/amp';

    export default function MyAmpComponent() {
      return (
        <Amp>
          <amp-img
            src="/static/image.jpg"
            width="600"
            height="400"
            layout="responsive"
            alt="Example Image"
          />
        </Amp>
      );
    }

レンダリングの最適化​

Next.jsは、静的生成（Static Generation）とサーバーサイドレンダリング（Server-Side Rendering）をサポートしており、適切な方法でレンダリングを選択することでパフォーマンスを向上させることができます。

静的生成（Static Generation）​

静的生成を使用すると、ビルド時にHTMLを生成し、パフォーマンスが向上します。

// pages/index.js
export async function getStaticProps() {
  // データフェッチング
  return {
    props: {
      // 取得したデータを返す
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Static Generation</h1>
      {/* データを表示 */}
    </div>
  );
}

サーバーサイドレンダリング（Server-Side Rendering）​

サーバーサイドレンダリングを使用すると、リクエストごとにページがレンダリングされ、動的なデータを扱うのに適しています。

// pages/index.js
export async function getServerSideProps() {
  // データフェッチング
  return {
    props: {
      // 取得したデータを返す
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Server-Side Rendering</h1>
      {/* データを表示 */}
    </div>
  );
}

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

ISR（Incremental Static Regeneration）は、ビルド後もページのコンテンツを更新する機能です。これにより、静的生成のパフォーマンスを維持しつつ、最新のデータを提供できます。

使用例​

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // 60秒ごとにページを再生成
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Incremental Static Regeneration</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

このように進めていきます。他に追加や修正の希望があればお知らせください。