Just 1 thing you should do when you develop an application by Next.js + TypeScript + AWS Amplify
Tags: aws, amplify, nextjs, javascript
Published: 2022-04-11 15:35:28

We just add `“amplify”` into `exclude` property in the `tsconfig.json`.
```json
{
  "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"]
}
```

## Why

Next.js doesn't have  `src` directory.

So, when we set up an Amplify project, we set `Source directory path` to `.` (current directory).

```bash
$ 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)

$
```

And Next.js’s build targets are the current directory's files and directories, including the `amplify` directory.

By the way, we can override AWS resources by amplify-cli.

When we use override option, amplify-cli generates `override.ts` under the `amplify` directory.

And this file unexpectedly becomes the build target for Next.js.

So, we need to add “amplify” into `exclude` property in the `tsconfig.json`.

We can check the error by the steps below.

First, add `api`.
```bash
$ 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

$
```

Second, override `api`.
```
$ 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
$ 
```

And then, edit `override.ts`.
```typescript
import { AmplifyApiGraphQlResourceStackTemplate } from '@aws-amplify/cli-extensibility-helper';

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

Finally, build this project and catch the error.
```bash
$ 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 .
$
```

## Environment

- Next.js
 - 12.1.4
- Amplify-CLI
 - 8.0.0
- Node
 - v16.14.2