はじめに
このチュートリアルでは、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の組み合わせは、静的サイトの迅速な開発とデプロイを可能にする強力なツールです。
ぜひ、さまざまな機能を試してみてください！