フルスタックプロジェクトのセットアップ

このチュートリアルはNext.js App Routerを使用して構築されています。

注意: Amplify JS v6は次のバージョン範囲のNext.jsをサポートしています: >=13.5.0 <16.0.0。 Amplifyと統合するには、正しいバージョンがあることを確認してください。

プロジェクトをセットアップするには、Create Next Appで新しいNext.jsアプリを作成します。これは新しいNext.jsアプリケーションを構築し始めるために必要なすべてを備えて迅速に開始できるシンプルなCLIツールです。その後、Amplifyを追加して新しいプロジェクトを初期化します。

プロジェクトディレクトリから、次のコマンドを実行します:

npm create next-app@14 -- next-amplified --ts --no-eslint --src-dir --import-alias '@/*' --no-tailwind --app
cd next-amplified

このコマンドは次のオプションでプロジェクトをブートストラップします:

App Router
TypeScript
ESLintなし
srcディレクトリ付き
Tailwind CSSなし
@/にエイリアスされたインポート(デフォルト)

プロジェクトのルートにいるので、次のコマンドを使用してアプリを実行できます:

npm run dev

これは開発サーバーを実行し、ビルドによって生成された出力を確認できるようにします。http://localhost:3000にアクセスすることで、実行中のアプリを確認できます。

新しいバックエンドの初期化

実行中のアプリが完成したので、Amplifyをセットアップして、アプリをサポートするために必要なバックエンドサービスを作成できるようにします。

新しいターミナルを開きます。プロジェクトのルートから、次を実行します:

amplify init

Amplifyを初期化するときに、アプリに関する情報の入力を求めるプロンプトが表示されます:

? Enter a name for the project (nextamplified)
The following configuration will be applied:
Project information
| Name: next-amplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use: default

新しいAmplifyプロジェクトを初期化するときに、いくつかのことが起こります:

バックエンド定義を保存するamplifyというトップレベルディレクトリを作成します。チュートリアルを進める際に、GraphQL APIやWebホスティングなどのクラウド機能を追加します。これらの機能を追加すると、amplifyフォルダはバックエンドスタックを定義するインフラストラクチャアズコードテンプレートで成長します。インフラストラクチャアズコードは、複製可能なバックエンドスタックを作成するベストプラクティス方法です。
指定したSource Directory Pathにamplifyconfiguration.jsonというファイルを作成します。これはAmplifyで作成するサービスのすべての構成を保持します。これは、Amplify JavaScriptクライアントライブラリがバックエンドサービスに接続するために必要な情報を取得する方法です。
.gitignoreファイルを変更し、生成されたファイルを無視リストに追加します

Amplifyライブラリをインストール

aws-amplifyパッケージは、プロジェクトでAmplify Librariesを使用するためのメインライブラリです。@aws-amplify/adapter-nextjsパッケージには、Amplifyライブラリをサーバー側で使用するための追加のNext.js固有の関数が含まれています:

npm install aws-amplify @aws-amplify/adapter-nextjs

これはAmplify LibrariesをあなたのNext.jsアプリケーションと一緒にインストールするために必要なすべてです。次に、新しいバックエンドAPIとデータベーステーブルを作成します。その後、AmplifyライブラリのNext.jsアダプターを使用してAPI要求を新しいバックエンドに行います。

Amplify CLIのセットアップ

APIとデータベースをアプリに接続する