Next.jsの主要機能: 動的インポートからデータフェッチまで

目次

1. Next.jsとは
2. 動的インポート
3. データフェッチ
4. まとめ

1. Next.jsとは

Next.jsはReactベースのサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)を効率的に行うためのフレームワークです。

2. 動的インポート

Next.jsでは、動的インポートをサポートしており、import()を使用して、コンポーネントやモジュールといった機能を必要に応じて読み込むことができます。これにより、パフォーマンスの向上が期待できます。

例えば、次のように動的インポートを行うことができます。

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'), {ssr: false});

function App() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <DynamicComponent />
    </div>
  );
}

export default App;

この例では、「DynamicComponent」が必要になったときに初めて読み込まれ、レンダリングされます。

3. データフェッチ

Next.jsでは、データをフェッチするために主に2つの方法があります。

3.1 getStaticProps

getStaticPropsは、ビルド時に静的データをフェッチするために使用される関数です。これにより、ビルド時にデータがフェッチされ、静的ページが生成されます。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

3.2 getServerSideProps

getServerSidePropsは、リクエスト毎にサーバー側でデータをフェッチするために使用される関数です。これにより、リクエスト毎にデータが最新のものに保たれます。

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

4. まとめ

このブログでは、Next.jsの主要機能である動的インポートとデータフェッチについて紹介しました。次のステップとして、実際のプロジェクトでこれらの機能を活用してみてください。