Just 1 thing you should do when you develop an application by Next.js + TypeScript + AWS Amplify

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "amplify"]
}

$ npx create-next-app@latest --typescript
$ cd my-app
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myapp
The following configuration will be applied:

Project information
| Name: myapp
| 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? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  .
? Distribution Directory Path: .next
? Build Command:  npm run build
? Start Command: npm run start
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
Adding backend environment dev to AWS Amplify app: d3rkk8kj6rlblg
⠦ Initializing project in the cloud...

(snip)

$

$ amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✔ Do you want to edit the schema now? (Y/n) · no
✅ Successfully added resource myapp locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

$ amplify override api

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/my-app/amplify/backend/api/myapp/schema
✅ Successfully generated "override.ts" folder at /home/ec2-user/environment/my-app/amplify/backend/api/myapp
✔ Do you want to edit override.ts file now? (Y/n) · no
$ 

import { AmplifyApiGraphQlResourceStackTemplate } from '@aws-amplify/cli-extensibility-helper';

export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
  resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
    attributeName: "ttl",
    enabled: true
  }
}

$ npm run build

> my-app@0.1.0 build
> next build

Failed to compile.

./amplify/backend/api/myapp/override.ts:4:3
Type error: Object is possibly 'undefined'.

  2 | 
  3 | export function override(resources: AmplifyApiGraphQlResourceStackTemplate) {
> 4 |   resources.models["Todo"].modelDDBTable.timeToLiveSpecification = {
    |   ^
  5 |     attributeName: "ttl",
  6 |     enabled: true
  7 |   }
info  - Checking validity of types .
$