Amplify Nextjs SSR secret key usage

It appears you're encountering an issue with environment variables not being recognized during the server-side build process of your Next.js application on AWS Amplify. This is a common challenge when working with server-side rendering (SSR) and environment variables in Next.js applications deployed on Amplify.

To address this issue, there are a few steps you can take:

1. Ensure that you've properly set up your environment variables in the Amplify console. For secret values, you should use Amplify's built-in secret management feature rather than plain environment variables.

2. In your Next.js application, make sure you're using the correct prefix for your environment variables. For Vite-based applications, environment variables typically need to start with "VITE_" to be exposed to the client-side code.

3. For server-side code (like API routes), you may need to explicitly export the secret variables during the build process. You can do this by modifying your build settings in the Amplify console. Add commands to export the secret variables before the build step, like this:

   export MY_SECRET=$(aws ssm get-parameter --name "/amplify/[YOUR_PROJECT_ID]/[YOUR_ENVIRONMENT]/MY_SECRET" --with-decryption --query "Parameter.Value" --output text)
   

   Replace [YOUR_PROJECT_ID], [YOUR_ENVIRONMENT], and MY_SECRET with your actual values.

4. In your Next.js configuration, ensure that you've set up the AMPLIFY_APP_ORIGIN environment variable. This should be in your .env file or set in the Amplify console:

   AMPLIFY_APP_ORIGIN=https://your-app-domain.com
   

5. For accessing secrets in your server-side code, you may need to use Amplify's server-side APIs. Import these from the '/server' sub-path and use the runWithAmplifyServerContext helper function to call Amplify APIs in an isolated server context.

6. If you're using Next.js 13 or later with the App Router, make sure you're using the appropriate data client for server components. Amplify provides generateServerClientUsingCookies() and generateServerClientUsingReqRes() for different use cases in server-side environments.

By implementing these steps, you should be able to properly access your environment variables and secrets in both client-side and server-side code when building and deploying your Next.js application on AWS Amplify.
Sources
How to correctly include and reference secret environment variables (AWS Amplify, process.env.secrets) | AWS re:Post
Server-Side Rendering - JavaScript - AWS Amplify Gen 2 Documentation
Server-Side Rendering - React - AWS Amplify Gen 2 Documentation
Next.js server runtime - React - AWS Amplify Gen 2 Documentation

Hey,

Hope you're keeping well.

In Amplify hosting for Next.js with SSR, environment variables for server-side code need to be set in the Amplify console under App settings > Environment variables for the specific branch you're building. Client-side variables must be prefixed with NEXT_PUBLIC_, but server-side variables can be unprefixed and will only be available at runtime in API routes or getServerSideProps. If you’re storing sensitive values, use Amplify’s Environment variables (encrypted) option so they are injected during the build. Also ensure your amplify.yml build spec does not override or miss these variables, as they are passed to the build container by CodeBuild.

Thanks and regards,
Taz