Next.jsでAmplifyを活用する方法

投稿日 2025年1月31日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーシステム開発

Next.jsはReactベースのフレームワークで、サーバーサイドレンダリングや静的サイト生成が得意です。一方、AWS Amplifyは、バックエンドサービスの構築やデプロイを簡単に行えるクラウドツールです。この2つを組み合わせることで、スケーラブルで高性能なフロントエンドアプリケーションを効率的に構築できます。

1. Next.jsとAmplifyを組み合わせるメリット

簡単なバックエンド構築：Amplifyを使えば、API、認証、データベースなどを迅速にセットアップ可能。
サーバーサイドレンダリング（SSR）対応：Next.jsのSSR機能とAmplifyを組み合わせて動的なデータを効率的に扱えます。
ホスティングの最適化：Amplify Hostingを使用すれば、CI/CDの設定も簡単に実現。

2. Next.jsアプリにAmplifyを導入する手順

ステップ 1: Next.jsのプロジェクトを作成

以下のコマンドでNext.jsアプリを作成します。

npx create-next-app@latest my-next-app  
cd my-next-app

ステップ 2: Amplify CLIのインストールと初期化

Amplify CLIをインストールします。

npm install -g @aws-amplify/cli  
amplify configure

AWSアカウントを設定した後、プロジェクトを初期化します。

amplify init

プロジェクトタイプは「JavaScript」、フレームワークは「React」を選択します。

ステップ 3: バックエンドリソースを追加

Amplifyを使ってバックエンドリソースを作成します。例えば、認証を追加する場合：

amplify add auth

他にもAPIやストレージの追加が可能です。

amplify add api  
amplify add storage

その後、以下のコマンドでリソースをデプロイします：

amplify push

ステップ 4: Amplifyライブラリの設定

プロジェクトにAmplifyライブラリを追加します。

npm install aws-amplify @aws-amplify/ui-react

次にpages/_app.jsでAmplifyを設定します。

import '../styles/globals.css';  
import Amplify from 'aws-amplify';  
import config from '../src/aws-exports';  

Amplify.configure(config);  

function MyApp({ Component, pageProps }) {  
  return <Component {...pageProps} />;  
}  

export default MyApp;

ステップ 5: データの取得と表示

APIリクエストを作成し、データを取得・表示します。例えば、GraphQL APIを使用する場合：

import { API, graphqlOperation } from 'aws-amplify';  
import { listTodos } from '../graphql/queries';  

export default function Home() {  
  const [todos, setTodos] = useState([]);  

  useEffect(() => {  
    const fetchTodos = async () => {  
      const result = await API.graphql(graphqlOperation(listTodos));  
      setTodos(result.data.listTodos.items);  
    };  
    fetchTodos();  
  }, []);  

  return (  
    <div>  
      {todos.map((todo) => (  
        <p key={todo.id}>{todo.name}</p>  
      ))}  
    </div>  
  );  
}