Next.js Amplify Starter Kit
Next.js 15とAWS Amplify Gen 2を備えた究極のモノレポスターターキット
概要
スケーラビリティと開発者体験を重視して構築された、プロダクションレディなNext.jsスターターキット。AWS Amplify Gen 2のホスティング機能を最大限に活用し、Turborepoによる効率的なモノレポ構成と、GitHub Actionsによる堅牢なCI/CDパイプラインを標準装備しています。
アーキテクチャ
AWSのベストプラクティスに基づいた、シンプルかつ強力な構成。Next.jsはAmplify Hostingでグローバルに配信され、メール機能はAWS SESを通じて信頼性の高い配信を実現します。複雑なバックエンド管理から解放され、アプリケーション開発に集中できます。
Strong Point: 管理するのはNext.jsコードだけ。インフラ、デプロイ、セキュリティはStarter Kitのパイプラインが自動的に処理します。
主な機能
⚡️ Next.js 15 (App Router) - 最新のReact機能とサーバーコンポーネント
☁️ AWS Amplify Hosting - グローバルCDNを備えた高速でセキュアなホスティング
🔄 Turborepo - 高速なビルドと効率的なパッケージ管理を実現するモノレポ構成
🎨 Tailwind CSS 4.0 - 次世代のユーティリティファーストCSSフレームワーク
🚀 GitHub Actions CI/CD - 自動テスト、プレビュー環境、本番デプロイの完全自動化
🧪 テスト環境完備 - Vitest & Playwrightによるユニット・E2Eテスト
🛡️ 型安全性 - TypeScriptによるエンドツーエンドの型安全性
📧 AWS SES統合 - 信頼性の高いメール配信機能の実装
📝 Zenn CLI連携 - 技術記事やドキュメントの効率的な管理
🔒 セキュリティ - ベストプラクティスに基づいたセキュアな実装
自動化されたデプロイメントフロー
1. Push to GitHub
開発者がコードをGitHubリポジトリにプッシュします。
2. CI Pipeline
GitHub Actionsが起動し、Lint、型チェック、ユニットテスト、E2Eテストを実行します。
3. CDK Synth
Amplify Gen 2のバックエンド定義からCloudFormationテンプレートを生成します。
4. Deploy to AWS
インフラストラクチャの変更を適用し、アプリケーションをAmplify Hostingにデプロイします。
技術スタック
Next.js 15
App Router, Server Actions
AWS Amplify Hosting
Managed Hosting & CDN
TypeScript
Strict type checking
Turborepo
Monorepo tool
Tailwind CSS 4.0
Atomic CSS
AWS SES
Email Delivery
Vitest
Unit Testing
Playwright
E2E Testing
Quick Start
リポジトリのクローン
リポジトリをローカルにクローンします。 devcontainerの使用を推奨します。
git clone https://github.com/i-Willink-Inc/next-amplify-starter-kit.git依存関係のインストール
pnpmを使用してパッケージをインストールします。
pnpm installサンドボックス環境の起動
Amplifyのサンドボックスモードを起動し、バックエンドをデプロイします。
npx ampx sandbox開発サーバーの起動
Next.jsの開発サーバーを起動します。
pnpm devユースケース
SaaSアプリケーション
スケーラブルなSaaSを迅速に立ち上げ。メール配信機能を標準装備し、ユーザーへの通知も容易。
コーポレート・LPサイト
SSG/ISRによる高速なページロードと、CMSライクな運用フロー（Zenn連携など）を実現。
オウンドメディア
記事管理機能とSEO最適化により、効果的なコンテンツマーケティングを実現。