Preview: AWS Amplify's new code-first DX (Gen 2)

The next generation of Amplify's backend building experience with a TypeScript-first DX.

Create your application

To set up the project, you will need to create a new Next.js app with the create-next-app tool. You'll then add Amplify and initialize a new project.

Run the following command and following the instructions to create a Next.js app.

1npx create-next-app@">=13.5.0 <15.0.0" next-amplified

Then run the following command to enter the root of your Next.js app.

1cd next-amplified

You can now run the app in development mode by using the following command:

1npm run dev

Create a New Amplify Backend

Now that you have a running app, it's time to set up Amplify so that you can set up the backend services you need.

Please ensure the Amplify CLI version in your system is higher than 12.5.1. You can check the CLI version by running amplify --version.

Open a new terminal. From the root of the project, run:

1amplify init

When you initialize Amplify you'll be prompted for some information about the app.

1? Enter a name for the project (nextamplified)
2The following configuration will be applied:
3
4Project information
5| Name: nextamplified
6| Environment: dev
7| Default editor: Visual Studio Code
8| App type: javascript
9| Javascript framework: <detected framework>
10| Source Directory Path: src
11| Distribution Directory Path: build
12| Build Command: npm run-script build
13| Start Command: npm run-script start
14
15? Initialize the project with the above configuration? Yes
16Using default provider  awscloudformation
17? Select the authentication method you want to use: AWS profile
18
19For more information on AWS Profiles, see:
20https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
21
22? Please choose the profile you want to use default

When you initialize a new Amplify project, a few things happen:

It creates a top level directory called amplify that stores your backend definition. During the tutorial you'll add capabilities such as a GraphQL API and authentication. As you add features, the amplify folder will grow with infrastructure-as-code templates that define your backend stack. Infrastructure-as-code is a best practice way to create a replicable backend stack.
It creates a file called amplifyconfiguration.json in the src directory that holds all the configuration for the services you create with Amplify. This is how the Amplify client is able to get the necessary information about your backend services.
It modifies the .gitignore file, adding some generated files to the ignore list
A cloud project is created for you in the AWS Amplify Console that can be accessed by running amplify console. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources.

As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in amplifyconfiguration.json will update automatically.

Install Amplify libraries

Install required dependencies to your Next.js app to start using Amplify.

1npm install aws-amplify @aws-amplify/adapter-nextjs

The aws-amplify package is the main library for working with Amplify in your apps. The @aws-amplify/adapter-nextjs provides adapter functions to enable use of Amplify APIs on the server side of your Next.js app for use cases such as Server Side Rendering (SSR).

For details of using Amplify with in your Next.js app, see use Amplify with Next.js.

You are now ready to start adding features to your application. Below are some examples of features you can start adding to your app.

Set up Amplify prerequisites