Next.jsとは？React.jsとの書き方の違い

Next.jsとは？React.jsとの違い

Next.jsはReact.jsのフレームワークの1つであり、React.jsをベースにしてサーバーサイドレンダリングや静的サイト生成などの機能を提供します。
React.jsは単なるUIライブラリですが、Next.jsはReact.jsを使用して、より複雑なウェブアプリケーションを構築するためのフルスタックフレームワークです。
Next.jsはルーティング、データフェッチング、コード分割などの機能も提供し、ウェブアプリケーションの開発を効率化します。

Next.jsで書いた処理の例

次の例は、Next.jsで書かれたシンプルなページのコードです。

// pages/index.js

import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>This is a simple Next.js example.</p>
    </div>
  );
}

export default HomePage;

このコードでは、pagesディレクトリ内にindex.jsというファイルを作成し、ReactコンポーネントHomePageを定義しています。
このコンポーネントは、

要素と

要素を含んだシンプルなページをレンダリングします。
このページは、Next.jsが提供するルーティング機能によって/パスにマッチし、ブラウザでアクセスすることができます。

Next.jsで書いたサーバサイドレンダリング処理の例

次の例は、Next.jsでサーバーサイドレンダリング（SSR）を行うためのコードです。

// pages/index.js

import React from 'react';

function HomePage({ serverData }) {
  return (
    <div>
      <h1>Hello, Next.js with SSR!</h1>
      <p>Server data: {serverData}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // ここでデータを取得する処理を行う
  const serverData = "This data is from server side";

  return {
    props: {
      serverData,
    },
  };
}

export default HomePage;

このコードでは、getServerSidePropsという関数を定義しています。
これはNext.jsによって提供される特別な関数であり、サーバーサイドでのデータのフェッチや処理を行うために使用されます。
この関数はサーバーサイドで実行され、ページがレンダリングされる前に呼び出されます。
その結果、ページのプロパティとして取得したデータが提供され、コンポーネント内で利用できます。

Next.jsで書いたサーバサイドレンダリング処理でAPIからデータを取得する場合の例

次の例は、Next.jsでAPIからデータを取得してサーバーサイドレンダリングを行う場合のコードです。

// pages/index.js

import React from 'react';
import axios from 'axios';

function HomePage({ serverData }) {
  return (
    <div>
      <h1>Hello, Next.js with SSR and API data!</h1>
      <p>Server data: {serverData}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // APIからデータを取得する
  try {
    const response = await axios.get('https://api.example.com/data');
    const serverData = response.data;
    
    return {
      props: {
        serverData,
      },
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      props: {
        serverData: null, // データの取得に失敗した場合はnullを返す
      },
    };
  }
}

export default HomePage;

この例では、getServerSideProps関数内でaxiosを使用して外部のAPIからデータを取得しています。
APIから取得したデータは、ページのプロパティとして返され、コンポーネント内で表示されます。
APIからのデータの取得に失敗した場合は、エラーハンドリングが行われ、nullがプロパティとして返されます。