Next.js App Router × Amplify Gen2 で認証つき ToDo アプリを作ってデプロイするまで

npx create-next-app@latest . --ts --app --tailwind --eslint --import-alias "@/*" --use-npm

npm create amplify@latest

// amplify/auth/resource.ts
import { defineAuth } from '@aws-amplify/backend';
 
export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailSubject: 'ToDoアプリ 確認コード',
      verificationEmailBody: (createCode: () => string) =>
        `確認コードは ${createCode()} です。`,
    },
  },
});

// amplify/data/resource.ts
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
 
const schema = a.schema({
  Todo: a
    .model({
      content: a.string().required(),
      isDone: a.boolean().default(false),
      priority: a.enum(['low', 'medium', 'high']),
    })
    .authorization((allow) => [allow.owner()]),
});
 
export type Schema = ClientSchema<typeof schema>;
 
export const data = defineData({
  schema,
  authorizationModes: { defaultAuthorizationMode: 'userPool' },
});

# ターミナル1: バックエンド（実 AWS にデプロイ＆変更を監視）
npx ampx sandbox
 
# ターミナル2: フロント
npm run dev

{
  "scripts": {
    "sandbox": "ampx sandbox",
    "sandbox:delete": "ampx sandbox delete"
  }
}

// components/ConfigureAmplify.tsx
'use client';
 
import { Amplify } from 'aws-amplify';
import { parseAmplifyConfig } from 'aws-amplify/utils';
import outputs from '@/amplify_outputs.json';
 
const amplifyConfig = parseAmplifyConfig(outputs);
 
Amplify.configure(
  {
    ...amplifyConfig,
    // custom.API（自作 REST）は自動展開されないので手動でマージ（後述の Lambda 用）
    API: { ...amplifyConfig.API, REST: outputs.custom.API },
  },
  { ssr: true }
);
 
const ConfigureAmplify = () => null;
export default ConfigureAmplify;

// utils/amplifyServerUtils.ts
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/data';
import { cookies } from 'next/headers';
import outputs from '@/amplify_outputs.json';
import type { Schema } from '@/amplify/data/resource';
 
export const { runWithAmplifyServerContext } = createServerRunner({ config: outputs });
 
export const cookiesClient = generateServerClientUsingCookies<Schema>({
  config: outputs,
  cookies,
  authMode: 'userPool',
});

// app/actions.ts
'use server';
 
import { cookies } from 'next/headers';
import { getCurrentUser } from 'aws-amplify/auth/server';
import { cookiesClient, runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
import { todoContentSchema } from '@/lib/schemas';
 
const requireUser = async () =>
  runWithAmplifyServerContext({
    nextServerContext: { cookies },
    operation: (ctx) => getCurrentUser(ctx),
  });
 
export type CreateTodoState = { error?: string; ok?: boolean };
 
export const createTodo = async (
  _prev: CreateTodoState,
  formData: FormData
): Promise<CreateTodoState> => {
  try {
    await requireUser();
  } catch {
    return { error: 'ログインが必要です' };
  }
 
  const parsed = todoContentSchema.safeParse(formData.get('content'));
  if (!parsed.success) return { error: parsed.error.issues[0].message };
 
  const { errors } = await cookiesClient.models.Todo.create({
    content: parsed.data,
    isDone: false,
  });
  if (errors) return { error: errors.map((e) => e.message).join(', ') };
 
  return { ok: true };
};

// lib/schemas.ts
import { z } from 'zod';
 
export const todoContentSchema = z
  .string()
  .trim()
  .min(1, '内容を入力してください')
  .max(100, '100文字以内で入力してください');

'use client';
import { useActionState } from 'react';
import { createTodo } from '@/app/actions';
 
const AddTodoForm = () => {
  const [state, formAction, isPending] = useActionState(createTodo, {});
  return (
    <form action={formAction}>
      <input name="content" disabled={isPending} placeholder="やることを入力…" />
      <button type="submit" disabled={isPending}>
        {isPending ? '追加中…' : '追加'}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
};

// amplify/functions/say-hello/resource.ts
import { defineFunction } from '@aws-amplify/backend';
 
export const sayHello = defineFunction({
  name: 'say-hello',
  entry: './handler.ts',
});

// amplify/functions/say-hello/handler.ts
import type { APIGatewayProxyHandler } from 'aws-lambda';
 
export const handler: APIGatewayProxyHandler = async (event) => {
  const name = event.queryStringParameters?.name ?? 'World';
  return {
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: `Hello, ${name}! from Lambda` }),
  };
};

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { Stack } from 'aws-cdk-lib';
import {
  AuthorizationType,
  CognitoUserPoolsAuthorizer,
  Cors,
  LambdaIntegration,
  RestApi,
} from 'aws-cdk-lib/aws-apigateway';
import { auth } from './auth/resource';
import { data } from './data/resource';
import { sayHello } from './functions/say-hello/resource';
 
const backend = defineBackend({ auth, data, sayHello });
 
const apiStack = backend.createStack('api-stack');
 
const restApi = new RestApi(apiStack, 'RestApi', {
  restApiName: 'myRestApi',
  deploy: true,
  deployOptions: { stageName: 'dev' },
  defaultCorsPreflightOptions: {
    allowOrigins: Cors.ALL_ORIGINS,
    allowMethods: Cors.ALL_METHODS,
    allowHeaders: Cors.DEFAULT_HEADERS,
  },
});
 
const cognitoAuth = new CognitoUserPoolsAuthorizer(apiStack, 'CognitoAuth', {
  cognitoUserPools: [backend.auth.resources.userPool],
});
 
restApi.root.addResource('hello').addMethod(
  'GET',
  new LambdaIntegration(backend.sayHello.resources.lambda),
  { authorizationType: AuthorizationType.COGNITO, authorizer: cognitoAuth }
);
 
// amplify_outputs.json にエンドポイントを書き出す
backend.addOutput({
  custom: {
    API: {
      [restApi.restApiName]: {
        endpoint: restApi.url,
        region: Stack.of(restApi).region,
        apiName: restApi.restApiName,
      },
    },
  },
});

import { get } from 'aws-amplify/api';
import { fetchAuthSession } from 'aws-amplify/auth';
 
const { tokens } = await fetchAuthSession();
const op = get({
  apiName: 'myRestApi',
  path: 'hello',
  options: {
    queryParams: { name: 'World' },
    headers: { Authorization: tokens?.idToken?.toString() ?? '' },
  },
});
const { body } = await op.response;
const json = await body.json();

// app/api/hello/route.ts
import { NextResponse } from 'next/server';
 
export const GET = async (request: Request) => {
  const name = new URL(request.url).searchParams.get('name') ?? 'World';
  return NextResponse.json({ message: `Hello, ${name}! from Next.js API Route` });
};

# amplify.yml
version: 1
backend:
  phases:
    build:
      commands:
        - npm install --cache .npm --prefer-offline
        # このブランチのスタックにバックエンドをデプロイ
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - npm install --cache .npm --prefer-offline
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*