Amplify never spins up Next server when using Nx monorepo

[dbrxnds]

Please describe which feature you have a question about?
Deploying a Next.js 11 app with a Nx monorepo

Provide additional details
It appears that using the monorepo feature (checkbox while creating an app) in Amplify Console makes it so that it doesn't recognize there being a Next.js app inside. This results in the build running fine but it never actually spins up the next server. It seems to consider it to be a static web app now.

When trying to create an app without the monorepo feature it does recognize the Next.js app being there but it will give me errors due to it not being on the root level, which makes sense.

I was hoping you could change the framework in Amplify Console manually but there doesn't seem to be a way to do this. It currently shows "Web" as framework, rather than Next.js.

What AWS Services are you utilizing?
Amplify

AppId
d28pbmqulo3anx

Region
eu-west-1

Provide additional details e.g. code snippets
My amplify.yml currently looks like this:

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands: 
            - npm run build:prod
      artifacts:
        baseDirectory: ../../dist/apps/orderpicker/.next
        files:
          - '**/*'
      cache:
        paths: 
          - node_modules/**/*
    appRoot: apps/orderpicker

I have looked through the other issues in regards to Nx and monorepo's in general, but those all seem to have specific errors come up, where as for us it will build and "deploy" fine, except that it doesn't consider it a Next app, so it doesn't actually start the server.

[github-actions]

Hi 👋, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[siegerts]

Hi 👋🏻 @iDavidB, can you try updating the application type using https://github.com/aws-amplify/amplify-console/blob/master/FAQ.md#convert-an-ssr-app-to-ssg.

Hope that helps!

[dbrxnds]

Hi @siegerts, I appreciate your help. I ran both commands, these, to be exact.

aws amplify update-app --app-id d28pbmqulo3anx --platform WEB --region eu-west-1
aws amplify update-branch --app-id d28pbmqulo3anx --branch-name main --framework 'Next.js - SSR' --region eu-west-1

While it did change the framework to Next.js - SSR, it seems to have no impact on the deployment process. I forgot to mention that it is an SSR based app, if that makes any difference?

When running it without it being a monorepo, it starts a process saying [INFO]: Starting SSR Build.. (After which it will error) after the build process. This is what i'm trying to achieve here too.

[siegerts]

Is it along the lines of #1866? If possible, it'd help to see a same app structure or repo to help the team repro.

[dbrxnds]

I don't think so, as that issue seems to run into a specific error, ours just builds but never runs the next steps.

I will spend some time tomorrow morning to create a reproduction repo.

[dbrxnds]

Hi again, @siegerts! I created a reproduction repo, you can find it HERE. I deployed it in the same way I have with my original repo and I can confirm I have the same issue.

AppId: d3s2lbk203au2l
Region: eu-west-1

amplify.yml of this app:

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands: 
            - npm run build:prod
      artifacts:
        baseDirectory: ../../dist/apps/mono-repro/.next
        files:
          - '**/*'
      cache:
        paths: 
            - node_modules/**/*
    appRoot: apps/mono-repro

Let me know if you can work with this or if you need any additional info.

[jtmthf]

@iDavidB I ran into something similar earlier and I believe it has to do with framework detection. It's done by looking at the package.json in monorepo root (which there is none in your case being nx) and looking at the build commands https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#package.json-settings.

See if you can create a stub package.json with the listed build scripts in it. It might also be worthwhile to try deploying without monorepo mode

[dbrxnds]

Hi @jtmthf, I linked to a reproduction repo in my previous reply. Our Nx setup does use a single package.json at the root, but you would be right to say that it probably doesn't recognize the Next commands due to there not being any on that level. However, I did change the framework to Next.js - SSR manually with the commands shown in one of my earlier replies.

The final build ends up in dist/apps/mono-repro/ where there will also be a next start command in the package.json.

I did also try to run it without monorepo mode, which made it fail due to other reasons, which were logical reasons.

[Athena96]

Hi, are you trying to deploy a Next.js Custom Server?
Amplify does not support Next.js Custom Servers at this time.

[dbrxnds]

Hi @Athena96,

No custom server. Just basic Nx with a Next app in it generated through the Nx CLI.

This reproduction repo has the exact setup we use in it, except cleared of our actual code ofcourse.
https://github.com/iDavidB/mono-repro

[dbrxnds]

Hi @siegerts, any updates on this? Were you able to reproduce the issue with my repo?

[ghost]

Hi @iDavidB, thanks for providing that repo and the build commands. I was able to reproduce the issue and get the same behaviors. I'll follow up with the team and provide an update once I get more information.

Reproduction steps:

1. Select New app -> Host web app
2. Select the GitHub repo username/mono-repro
3. Check monorepo box
4. Specify file path for the next app apps/mono-repro
5. Edit build settings and replace with:

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands: 
            - npm run build:prod
      artifacts:
        baseDirectory: ../../dist/apps/mono-repro/.next
        files:
          - '**/*'
      cache:
        paths: 
            - node_modules/**/*
    appRoot: apps/mono-repro

6. Click Save and then Next.
7. Notice the detected framework is Web and not Next.js - SSR. Deployment will succeed but the website will result in HTTP ERROR 404

[victorccccc]

Hello @iDavidB, Sorry for the inconvenience. According to https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#deploy-nextjs-app, we detect your app as a SSR app by inspecting your package.json file in your monorepo app root folder (apps/mono-repro/package.json). However, I notice that you are using Nx monorepo framework which is little a different (package.json in root folder). Can you please follow my step to resolve this issue?

1. Create a package.json file inside of your app root folder & Add following content and commit :

{
    "version": "0.1.0",
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    },
    "dependencies": {
      "next": "^11.1.2"
    }
}

2. Create a new App and it will be detected as SSR app, Choose correct SSR App service role, Edit build settings as below:

version: 1
applications:
  - frontend:
      phases:
        build:
          commands: 
            # This step will build app with Nx framework 
            - cd ../../
            - npm install
            - npm run build:prod
            # This step will build/update SSR resources(S3, Cloudfront, Lambda@Edge)
            - cd apps/mono-repro
            - npm install
      artifacts:
        baseDirectory: ../../dist/apps/mono-repro/.next
        files:
          - '**/*'
      cache:
        paths: 
            - node_modules/**/*
    appRoot: apps/mono-repro

[dbrxnds]

Hi @victorccccc, we decided against using Amplify for our deployments in the end. Partly due to the troubles deploying but we also needed more flexibility after all. I hope this issue may help someone in the future.

Either way, thank you all for your help!

[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.