NextJS Build fails on Amplify, SSR

If you are here from the past or in future,,this error is a monster,I know you have googled and your Chatgpt and AI tools were not able to fix .It troubled me for 12hrs straight😭 but I finally fixed it ,

This is the solution ,,

Understand the error

Getting a 500 Internal Server Error when deploying my Next.js 13 and above application to AWS Amplify, even though it builds and runs perfectly locally. The error occurs during runtime, not during the build process.

The Root cause

Builds on Amazon Amplify do not include the envs during the build process like vercel and Netlify.

Amplify Console environment variables are not automatically available during the build process

• Next.js requires environment variables to be present in .env.production for server-side code

• Missing environment variables cause authentication and database connection failures

• Next.js 15 has specific requirements for React bundling in serverless environments

• AWS Lambda runtime requires the __NEXT_PRIVATE_PREBUNDLED_REACT=next flag

• UI libraries (Radix UI, Lucide React, etc.) need proper transpilation for server environments

• ES modules not properly handled in AWS Lambda runtime

Solution 👌

1.Configure Next.js for Amplify Compatibility in your next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  
  // Critical for Amplify deployment
  output: 'standalone',
  
  // Transpile packages that cause issues in Amplify deployment
  transpilePackages: [
    // Radix UI packages
    '@radix-ui/react-accordion',
    '@radix-ui/react-alert-dialog',
    '@radix-ui/react-avatar',
    '@radix-ui/react-checkbox',
    '@radix-ui/react-dialog',
    '@radix-ui/react-dropdown-menu',
    '@radix-ui/react-label',
    '@radix-ui/react-popover',
    '@radix-ui/react-select',
    '@radix-ui/react-tabs',
    // Add other UI libraries you're using
    'lucide-react',
    'cmdk',
    'class-variance-authority',
    'framer-motion',
    'recharts',
    // Add any RC packages
    'rc-pagination',
    'rc-util',
    // Add other problematic packages
  ],
  
  // Server external packages
  serverExternalPackages: ['postgres', 'pg', '@aws-sdk/client-s3'],
  
  // Webpack configuration
  webpack: (config, { isServer }) => {
    // Handle ES modules properly
    config.resolve.extensionAlias = {
      '.js': ['.ts', '.tsx', '.js', '.jsx'],
      '.mjs': ['.mts', '.mjs'],
    };
    
    // Client-side fallbacks for Node.js modules
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        net: false,
        tls: false,
      };
    }
    
    return config;
  },
  
  poweredByHeader: false,
}

export default nextConfig

2.Create Proper amplify.yml Configuration (This is the life saver🤞)

version: 1
your app name:
  phases:
    preBuild:
      commands:
        - npm install --legacy-peer-deps
    build:
      commands:
        # Critical Next.js fix for Amplify
        - echo "__NEXT_PRIVATE_PREBUNDLED_REACT=next" >> .env.production
        
        # Inject environment variables from Amplify Console
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env.production
        - echo "NEXTAUTH_SECRET=$NEXTAUTH_SECRET" >> .env.production
        - echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env.production
        .env.production
        
        # Add any other environment variables you need here 
        - echo "NEXT_AWS_S3_ACCESS_KEY_ID=$NEXT_AWS_S3_ACCESS_KEY_ID" >> .env.production
        - echo "NEXT_AWS_S3_SECRET_ACCESS_KEY=$NEXT_AWS_S3_SECRET_ACCESS_KEY" >> .env.production
        
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - node_modules/**/*

Then redeploy your app and see it work as you sip your cofee.

I sufferd 12hrs for you to be saved 😒,welcome in advance (I know you will thank me)

The issue you're experiencing with your Next.js app failing to build on AWS Amplify, despite building successfully locally, could be due to a few factors:

1. Server-Side Rendering (SSR) Support: AWS Amplify Hosting has recently introduced support for SSR applications, including Next.js. However, there might be some compatibility issues with certain Next.js features or configurations.

2. Build Image: Amplify Hosting has updated its default build image to Amazon Linux 2023, which includes newer versions of Node.js (18 and 20). This change might affect your build process if your local environment uses a different Node.js version.

3. Environment Variables: There could be missing or incorrect environment variables in your Amplify build settings that are present in your local environment.

4. Dependencies: There might be a mismatch between the dependencies installed locally and those installed during the Amplify build process.

To troubleshoot this issue:

1. Ensure you're using the latest version of Amplify Hosting's build image (Amazon Linux 2023).

2. Check that all necessary environment variables are correctly set in your Amplify console.

3. Review your dependencies, especially those related to React and Next.js, to ensure they're compatible with the version of Next.js you're using.

4. Consider using the Amplify CLI to deploy your Next.js application, as it might provide a more streamlined process for SSR apps.

5. If the issue persists, you may need to investigate the specific error related to "useContext" in your application code, as it suggests a problem with React's context API usage.

6. Review the Amplify documentation for SSR framework support and troubleshooting guides for additional insights.

If these steps don't resolve the issue, you might need to create a new Amplify app and redeploy your project, as you mentioned it works on a new Amplify app. This could help isolate whether the problem is with your project configuration or the Amplify environment itself.
Sources
Introducing Support for Hosting Any SSR app on AWS Amplify Hosting | Front-End Web & Mobile
Deploy Next.js 14 SSR apps with AWS Amplify Hosting’s Amazon Linux 2023 Support | Front-End Web & Mobile
AWS Amplify JavaScript’s NEW developer preview with reduced bundle size, improved TypeScript and Next.js support | Front-End Web & Mobile