【コスパ最強】たった8ステップ！Next.js静的サイトをAWS Amplifyでデプロイする方法

# はじめに

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

---

## 1. 前提条件

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

- **Node.jsとnpmのインストール**: [Node.js公式サイト](https://nodejs.org/)から最新のLTSバージョンをインストールしてください。
- **Gitのインストール**: [Git公式サイト](https://git-scm.com/)からGitをインストールしてください。
- **AWSアカウント**: AWS Amplifyを使用するために、[AWSアカウント](https://aws.amazon.com/)を作成してください。
- **GitHubアカウント**: GitHubにリポジトリを作成するために必要です。まだ持っていない場合は、[GitHub公式サイト](https://github.com/)でアカウントを作成してください。

---

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

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

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

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

```bash
mkdir my-nextjs-static-app
cd my-nextjs-static-app
```

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

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

```bash
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. プロジェクトディレクトリに移動

```bash
cd my-nextjs-static-app
```

---

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

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

### 1. ページの作成

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

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

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

```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ページへのリンクを追加します。

```tsx
// 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` を設定します。

```typescript
// 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` パッケージを開発依存としてインストールします。
以下のコマンドをプロジェクトのルートディレクトリで実行してください。

```bash
npm install -D serve
```

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

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

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

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

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

```bash
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` ディレクトリをローカルサーバー上で提供します。

```bash
npm start
```

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

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

---

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

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

### 1. Gitの初期化

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

```bash
git init
```

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

```bash
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を取得し、リモートとして追加します。

```bash
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` をカスタマイズできます。今回は静的サイトとしてホスティングするため、基本設定で問題ありません。以下はデフォルトの設定例です。

```yaml
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` を設定します。

```typescript
// 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の組み合わせは、静的サイトの迅速な開発とデプロイを可能にする強力なツールです。

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

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/