はじめに

このチュートリアルでは、Next.jsのApp RouterとTypeScriptを使用して静的にコンテンツを生成し、それをAWS Amplifyでホスティングする手順を解説します。
動的なデータ取得を必要とせず、ビルド時に全てのコンテンツを生成する形式で進めます。

1. 前提条件

以下の環境が整っていることを確認してください。

Node.jsとnpmのインストール: Node.js公式サイトから最新のLTSバージョンをインストールしてください。
Gitのインストール: Git公式サイトからGitをインストールしてください。
AWSアカウント: AWS Amplifyを使用するために、AWSアカウントを作成してください。
GitHubアカウント: GitHubにリポジトリを作成するために必要です。まだ持っていない場合は、GitHub公式サイトでアカウントを作成してください。

2. Next.jsプロジェクトの作成

まず、Next.jsとTypeScriptを使用した新しいプロジェクトを作成します。

1. プロジェクトディレクトリの作成

ターミナル（コマンドプロンプト）を開き、プロジェクトを作成したいディレクトリに移動します。

mkdir my-nextjs-static-app
cd my-nextjs-static-app

2. Next.jsプロジェクトの初期化

create-next-appを使用してプロジェクトを初期化します。App RouterとTypeScriptを使用するために必要な設定を行います。

npx create-next-app@latest

プロンプトに従い、以下のように入力します：

What is your project named? my-nextjs-static-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes（推奨）
Would you like to use Tailwind CSS? No（必要に応じて選択）
Would you like to use src/ directory? Yes（推奨）
Would you like to use experimental app/ directory? Yes（App Routerを使用するため）

設定が完了すると、my-nextjs-static-app ディレクトリが作成されます。

3. プロジェクトディレクトリに移動

cd my-nextjs-static-app

3. 静的コンテンツの作成

ここでは、動的なデータ取得を行わず、ビルド時に静的に生成されるページを作成します。

1. ページの作成

app ディレクトリ内に静的なページを追加します。

a. `app/about/page.tsx` の作成

app/about/page.tsx を作成し、以下のコードを追加します。

// app/about/page.tsx
import Link from 'next/link';
import React from 'react';

const About: React.FC = () => {
  return (
    <div style={styles.container}>
      <h1>About Page</h1>
      <p>This is a statically generated about page of our Next.js app hosted on AWS Amplify.</p>
      <Link href="/">Go back to Home</Link>
    </div>
  );
};

const styles: { container: React.CSSProperties } = {
  container: {
    padding: '2rem',
    fontFamily: 'Arial, sans-serif',
  },
};

export default About;

b. `app/page.tsx` の編集

app/page.tsx を編集し、Aboutページへのリンクを追加します。

// app/page.tsx
import Link from 'next/link';
import React from 'react';

const Home: React.FC = () => {
  return (
    <div style={styles.container}>
      <h1>Welcome to Next.js on AWS Amplify!</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
};

const styles: { container: React.CSSProperties } = {
  container: {
    padding: '2rem',
    fontFamily: 'Arial, sans-serif',
  },
};

export default Home;

2. 静的サイトとしてのビルド設定

Next.jsはデフォルトで静的サイト生成（Static Generation）をサポートしています。
App RouterとTypeScriptを使用している場合も、特に動的なデータ取得が不要な場合、追加の設定は必要ありません。

静的エクスポートの設定

Next.jsで完全な静的サイトを生成するために、next.config.ts を設定します。

// next.config.ts
import { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
};

export default nextConfig;

これにより、npm run build で out ディレクトリに静的ファイルが生成されます。
amplify.yml の baseDirectory を out に設定します。

4. ビルドとサーバーの設定

ビルドプロセスを正しく設定し、静的ファイルを提供するための手順を行います。

1. `serve` パッケージのインストール

静的ファイルを提供するために、serve パッケージを開発依存としてインストールします。
以下のコマンドをプロジェクトのルートディレクトリで実行してください。

npm install -D serve

2. `package.json` のスクリプトを修正

package.json 内の scripts セクションを以下のように修正します。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "serve out"
},

3. プロジェクトのビルド

以下のコマンドを実行してプロジェクトをビルドします。これにより、静的ファイルが out ディレクトリに生成されます。

npm run build

ビルドが成功すると、以下のようなメッセージが表示されます。

▲ Next.js 15.0.3

Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (6/6)
✓ Collecting build traces
✓ Exporting (3/3)
✓ Finalizing page optimization

○  (Static)  prerendered as static content

4. 静的ファイルの提供

ビルドが成功したら、以下のコマンドで静的ファイルを提供します。serve パッケージが out ディレクトリをローカルサーバー上で提供します。

npm start

デフォルトのURL: http://localhost:3000

ブラウザを開き、提供されたURL（例: http://localhost:3000）にアクセスして、ホームページおよびAboutページが正しく表示されることを確認してください。

5. Gitリポジトリの作成とプッシュ

AWS AmplifyはGitリポジトリと連携してデプロイを行います。ここではGitHubを使用しますが、他のGitサービスでも同様の手順で進められます。

1. Gitの初期化

プロジェクトディレクトリでGitを初期化します。

git init

2. ファイルのステージングとコミット

git add .
git commit -m "Initial commit - Static Next.js app with App Router and TypeScript"

3. GitHubリポジトリの作成

GitHubにログインし、新しいリポジトリを作成します。例えば、リポジトリ名を my-nextjs-static-app とします。

4. リモートリポジトリの追加とプッシュ

作成したGitHubリポジトリのURLを取得し、リモートとして追加します。

git remote add origin https://github.com/your-username/my-nextjs-static-app.git
git branch -M main
git push -u origin main

※ your-username をご自身のGitHubユーザー名に置き換えてください。

6. AWS Amplifyの設定とホスティング

次に、AWS Amplifyを使用してアプリケーションをホスティングします。

1. AWS Amplifyコンソールへのログイン

AWS管理コンソールにログインし、サービス一覧から Amplify を選択します。

2. 新しいアプリの作成

Amplifyダッシュボードで 「ホスティングを開始」 または 「新しいアプリを追加」 をクリックします。

3. ソースコードの選択

「GitHub」 を選択し、GitHubアカウントとAmplifyを連携させます。初めて連携する場合は、認証が必要です。

4. リポジトリとブランチの選択

リポジトリ: my-nextjs-static-app
ブランチ: main

を選択します。

5. ビルド設定の確認

AmplifyはデフォルトでNext.jsのビルド設定を自動的に検出しますが、必要に応じて amplify.yml をカスタマイズできます。今回は静的サイトとしてホスティングするため、基本設定で問題ありません。以下はデフォルトの設定例です。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: out
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

静的エクスポートの設定

Next.jsで完全な静的サイトを生成するために、next.config.ts を設定します。

// next.config.ts
import { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
};

export default nextConfig;

これにより、npm run build で out ディレクトリに静的ファイルが生成されます。
amplify.yml の baseDirectory を out に設定しています。

6. デプロイの開始

設定を確認後、「保存してデプロイ」 をクリックします。Amplifyがビルドプロセスを開始し、デプロイが進行します。

7. デプロイの確認

デプロイが完了すると、Amplifyダッシュボードにデプロイのステータスが表示されます。
成功すると、アプリケーションのURLが提供されます。

1. アプリケーションURLへのアクセス

提供されたURL（例: https://main.dxxxxxxxxx.amplifyapp.com）にアクセスし、Next.jsアプリケーションが正しくホスティングされていることを確認します。

2. 動作確認

ホームページおよびAboutページが正常に表示され、リンクが機能することを確認します。

8. まとめ

このチュートリアルでは、Next.jsのApp RouterとTypeScriptを使用して静的なアプリケーションを作成し、それをAWS Amplifyを使ってホスティングする手順を説明しました。
AWS Amplifyを利用することで、簡単に継続的デプロイメントやスケーラブルなホスティング環境を実現できます。

今後のステップ

カスタムドメインの設定: 独自ドメインを使用する場合は、Amplifyダッシュボードから設定できます。
環境変数の設定: 必要に応じて、Amplifyで環境変数を設定し、アプリケーションで利用できます。
スタイリングの強化: CSSフレームワーク（例: Tailwind CSS）を導入して、アプリケーションのデザインを向上させましょう。
追加ページの作成: 静的なページを追加して、サイトの内容を充実させます。

Next.jsとAWS Amplify、そしてTypeScriptの組み合わせは、静的サイトの迅速な開発とデプロイを可能にする強力なツールです。

ぜひ、さまざまな機能を試してみてください！