AWS Amplify Next.js全栈开发入门模板这是一个基于Next.js应用路由和AWS Amplify的全栈开

AWS Amplify Next.js (App Router) 入门模板

项目概述

这是一个专为现代Web开发设计的全栈应用模板，结合了Next.js 13+的应用路由特性和AWS Amplify的强大后端服务。项目提供了开箱即用的身份认证、API接口和数据库解决方案，让开发者能够快速搭建生产级的云应用。

功能特性

🔐 身份认证集成 - 内置Amazon Cognito身份验证服务，支持邮箱登录
🚀 GraphQL API - 使用AWS AppSync提供即用型GraphQL端点
💾 实时数据库 - 基于Amazon DynamoDB的数据库支持实时数据同步
⚡ Next.js优化 - 采用最新的App Router架构，支持服务端组件
📱 前端UI集成 - 包含完整的React组件和状态管理示例
🔧 TypeScript支持 - 完整的类型定义和开发体验

安装指南

前置要求

Node.js 18.0.0 或更高版本
npm 或 yarn 包管理器
AWS账户（用于部署后端服务）

安装步骤

克隆项目仓库

git clone <repository-url>
cd <project-directory>

安装依赖
```
npm install
# 或
yarn install
```
配置Amplify后端
```
npx ampx configure
```
部署到AWS
```
npx ampx sandbox
```
启动开发服务器
```
npm run dev
# 或
yarn dev
```

使用说明

基础使用示例

项目包含一个完整的待办事项应用示例，演示了如何与后端服务进行交互：

// 前端组件使用示例
"use client";
import { generateClient } from "aws-amplify/data";
import type { Schema } from "@/amplify/data/resource";

const client = generateClient<Schema>();

// 创建新的待办事项
function createTodo() {
  client.models.Todo.create({
    content: "学习AWS Amplify",
  });
}

// 查询待办事项列表
async function listTodos() {
  const { data: todos } = await client.models.Todo.list();
  return todos;
}

实时数据订阅

项目支持实时数据更新，当数据库内容发生变化时自动同步到前端：

// 实时订阅数据变化
client.models.Todo.observeQuery().subscribe({
  next: (data) => {
    // 处理实时更新的数据
    console.log(data.items);
  },
});

身份认证配置

后端认证服务配置简洁明了：

// 认证资源配置
export const auth = defineAuth({
  loginWith: {
    email: true, // 启用邮箱登录
  },
});

核心代码

后端资源配置

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource.js';
import { data } from './data/resource.js';

// 定义完整的后端服务
defineBackend({
  auth,  // 身份认证服务
  data,  // 数据库服务
});

数据模型定义

// amplify/data/resource.ts
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(), // 字符串类型的content字段
    })
    .authorization((allow) => [allow.publicApiKey()]), // API密钥授权
});

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey", // 默认API密钥认证
    apiKeyAuthorizationMode: {
      expiresInDays: 30, // API密钥30天有效期
    },
  },
});

前端主组件

// app/page.tsx
export default function App() {
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);

  // 监听数据变化
  function listTodos() {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });
  }

  // 创建新待办事项
  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.content}</li>
        ))}
      </ul>
    </main>
  );
}

应用配置

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Next.js配置选项
};

module.exports = nextConfig;

这个模板项目为开发者提供了一个完整的全栈应用起点，包含了现代Web开发所需的核心功能，让您能够专注于业务逻辑而不是基础设施的搭建。