We just add “amplify”
into exclude
property in the tsconfig.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).
$ 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
.
$ 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
.
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.
$ 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
Top comments (0)