Publish nextjs failed

[jieliu218]

Describe the bug
➜ nextjs git:(master) ✗ amplify publish
✔ Successfully pulled backend environment staging from the cloud.

Current Environment: staging

Category	Resource name	Operation	Provider plugin
Auth	amplifytestjie	No Change	awscloudformation
Api	amplifytestjie	No Change	awscloudformation
Hosting	amplifyhosting	No Change	awscloudformation

No changes detected
Publish started for amplifyhosting

[email protected] build /Users/j.e.liu/Desktop/project/jie/amplify-jie/nextjs
next build

info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (2/2)
info - Finalizing page optimization

Page Size First Load JS
┌ ○ / 3.44 kB 65.8 kB
├ └ css/c39b4881d3c06665c5d4.css 760 B
├ /_app 0 B 62.4 kB
└ ○ /404 3.44 kB 65.8 kB

• First Load JS shared by all 62.4 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.7cd962.js 12.8 kB
  ├ chunks/framework.9116e7.js 41.8 kB
  ├ chunks/main.38b51b.js 6.54 kB
  ├ chunks/pages/_app.0536e9.js 529 B
  ├ chunks/webpack.e06743.js 751 B
  └ css/2f26bb9842d84a608fa3.css 202 B

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)

✔ Zipping artifacts completed.
✖ Deployment failed! Please report an issue on the Amplify Console GitHub issue tracker at https://github.com/aws-amplify/amplify-console/issues.
An error occurred during the publish operation

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Athena96]

Hi @jieliu218 currently, Amplify does not natively support deploying NextJS Apps, however it is on our roadmap for this year.

In the meantime, here is a workaround for you (we will be updating our docs with this as well, but I wanted to provide it here to unblock you. Thanks!

---

Steps

1. Create a NextJS app (if you don't have one already)

2. Add an amplify.yml file to the top level of your apps directory, and add the following code. (replacing <bucket-name> with a unique bucket name)

version: 1

backend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - amplifyPush --simple
        - npm run build
        - aws s3 mb s3://<bucket-name>
        - aws s3 sync "s3://<bucket-name>/${USER_BRANCH}/.serverless" .serverless   # pull previous state
        - npx serverless                                                                  # generate new & deploy!
        - aws s3 sync .serverless "s3://<bucket-name>/${USER_BRANCH}/.serverless"   # push state to bucket
frontend:
  phases:
    build:
      commands:
        - echo "nextjs app, skipping"
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

3. Add a serverless.yml file with the following contents to the top level of your directory:

mynextjsapp:
  component: "@sls-next/[email protected]"

4. Initialize your Amplify app. In the top level of your app directory directory run the following (you need the Amplify CLI to be installed):

amplify init
# enter a name
# enter an environment name
# enter default editor
# enter `javascript`
# enter `react`
# enter `src`
# enter `build`
# enter `npm run-script build`
# *enter `npm run dev`

Now, select your AWS profile to deploy to and wait for the app to be created.

5. Commit your project to a repository.

6. Open your app in the AWS Amplify Console.

   • Select the "Front End" tab
   • Select the Repo provider you're useing and then "Connect Branch"
   • Continue throught the steps (ensure you attach a Backend Service role when configuring the backend env). Select 'Next'
   • Review the settings then click "Save and Deploy"

7. After your deploy completes

   • open the Backend build logs for your app.
   • scroll to the bottom and find the CloudFront distribution id that Serverless deployed and save it.

8. The final step is to add a Rewrite Rule to this Serverless CloudFront Distribution.

   • select your app in the Console
   • on the lefthand menu, select "Rewrites and Redirects"
   • click "Add rewrites and redirects"
   • setup a rewrite rule from your Amplify distro to the Serverless distro like so:

   Source Address: /<*>
   Target address: https://<distroID-of-serverless-distro>.cloudfront.net/<*>
   Type: 200 (Rewrite)
   Country Code:
   

9. And that's it! Now you can visit your Amplify App Distro and it will take you to your newly deployed NextJS App!

[yogiokto]

Hi @Athena96, I tried above steps, but getting issue with graphql api auth, the issue was with next build command

2021-01-31T04:33:23.304Z [WARNING]: > Build error occurred 2021-01-31T04:33:23.305Z [WARNING]: Error: No credentials at GraphQLAPIClass.<anonymous> (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:198:35) at step (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:44:23) at Object.next (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:25:53) at fulfilled (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:16:58) at processTicksAndRejections (internal/process/task_queues.js:97:5) { type: 'Error' }

I got the same error message by follow steps from here

I'm using next js with dynamic route + ssg, fetch all the ids from appsync not datastore.

export const getStaticPaths = async () => {
  const SSR = withSSRContext();
  const {data} = await SSR.API.graphql({ query: listNotes });
  const paths = data.listNotes.items.map((note) => ({ params: { id: note.id } }));
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const SSR = withSSRContext();
  const { data } = await SSR.API.graphql({ query: getNote, variables: { id: params.id }});
  return {
    props: {
      note: data.getNote,
    },
  };
};

=====

I also tried with SSR (getserversideprops), but the issue now is with next export, it's not supported

Any idea how to publish Next.js project with dynamic route on Amplify?

Thanks,

[yogiokto]

Hi @Athena96, I tried above steps, but getting issue with graphql api auth, the issue was with next build command

2021-01-31T04:33:23.304Z [WARNING]: > Build error occurred 2021-01-31T04:33:23.305Z [WARNING]: Error: No credentials at GraphQLAPIClass.<anonymous> (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:198:35) at step (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:44:23) at Object.next (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:25:53) at fulfilled (/codebuild/output/src430952019/src/dinotes-app-serverless-dev/node_modules/@aws-amplify/api-graphql/lib/GraphQLAPI.js:16:58) at processTicksAndRejections (internal/process/task_queues.js:97:5) { type: 'Error' }

I got the same error message by follow steps from here

I'm using next js with dynamic route + ssg, fetch all the ids from appsync not datastore.

export const getStaticPaths = async () => {
  const SSR = withSSRContext();
  const {data} = await SSR.API.graphql({ query: listNotes });
  const paths = data.listNotes.items.map((note) => ({ params: { id: note.id } }));
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const SSR = withSSRContext();
  const { data } = await SSR.API.graphql({ query: getNote, variables: { id: params.id }});
  return {
    props: {
      note: data.getNote,
    },
  };
};

=====

I also tried with SSR (getserversideprops), but the issue now is with next export, it's not supported

Any idea how to publish Next.js project with dynamic route on Amplify?

Thanks,

Issue fixed by not using getStaticPaths, getStaticProps & getServerSideProps, just use useRouter() to change the state without fetching data, fetch data done inside useEffect().

Thanks,

[felixs8696]

Hi I'm having an issue that may be related to this:

serverless-nextjs/serverless-next.js#936

@Athena96 is it possible this is related to the fix you're mentioning? I know I'm not deploying using Amplify, but perhaps you know something about this issue?

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.