Set up fullstack project
To set up the project, you'll first create a new Next.js app with Create Next App, a simple CLI tool that enables you to quickly start building a new Next.js application, with everything set up for you. You'll then add Amplify and initialize a new project.
From your projects directory, run the following commands:
1npm create next-app@14 -- next-amplified --ts --no-eslint --src-dir --import-alias '@/*' --no-tailwind --app2cd next-amplified
This command will bootstrap the project with the following options:
- App Router
- TypeScript
- No ESLint
- With the
src
directory - No Tailwind CSS
- imports aliased to
@/
(the default)
Now that you're in the root of the project, you can run the app by using the following command:
1npm run dev
This runs a development server and allows us to see the output generated by the build, you can see the running app by navigating to \http://localhost:3000>.
Initialize a new backend
Now that you have a running app, it's time to set up Amplify so that you can create the necessary backend services needed to support the app.
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 information5| Name: next-amplified6| Environment: dev7| Default editor: Visual Studio Code8| App type: javascript9| Javascript framework: react10| Source Directory Path: src11| Distribution Directory Path: build12| Build Command: npm run-script build13| Start Command: npm run-script start14
15? Initialize the project with the above configuration? Yes16Using default provider awscloudformation17? Select the authentication method you want to use: AWS profile18
19For more information on AWS Profiles, see:20https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html21
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 cloud capabilities, such as GraphQL API and web hosting. As you add these features, theamplify
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 your designated Source Directory Path that holds all the configuration for the services you create with Amplify. This is how the Amplify JavaScript client library is able to get the necessary information to connect to your backend services. - It modifies the
.gitignore
file, adding some generated files to the ignore list
Install Amplify Libraries
The aws-amplify
package is the main library for working with Amplify Libraries in your projects. The @aws-amplify/adapter-nextjs
package includes additional Next.js-specific functions for using the Amplify libraries server-side:
1npm install aws-amplify @aws-amplify/adapter-nextjs
That's all it takes to install Amplify libraries with your Next.js application. Next, we'll create a new backend API and database tables. Then, we'll use the Amplify library's Next.js adapter to make API requests to your new backend.