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.
You can now run the app in development mode by using the following command:
1npm run dev
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.
Open a new terminal. From the root of the project, run:
When you initialize Amplify you'll be prompted for some information about the app.
When you initialize a new Amplify project, a few things happen:
- It creates a top level directory called
amplifythat stores your backend definition. During the tutorial you'll add capabilities such as a GraphQL API and authentication. As you add features, the
amplifyfolder 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
srcdirectory 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
.gitignorefile, 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 required dependencies to your Next.js app to start using Amplify.
1npm install aws-amplify @aws-amplify/adapter-nextjs
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.