add explainer for function env file generation (#7957)

Author: josefaidt

src/pages/[platform]/build-a-backend/functions/environment-variables-and-secrets/index.mdx

@@ -72,7 +72,7 @@ Within your function handler, you can access environment variables using the nor
 
 ```ts title="amplify/functions/say-hello/handler.ts"
 // highlight-next-line
-import { env } from '$amplify/env/say-hello'; // the import is '$amplify/env/<function name>'
+import { env } from '$amplify/env/say-hello'; // the import is '$amplify/env/<function-name>'
 
 export const handler = async (event) => {
   // the env object has intellisense for all environment variables that are available to the function
@@ -100,6 +100,48 @@ If you did not, you will need to manually configure your project. Within your `a
 
 </Accordion>
 
+### Generated env files
+
+When you configure your function with environment variables or secrets, Amplify's backend tooling generates a file using the function's `name` in `.amplify/generated` with references to your environment variables and secrets, as well as [environment variables predefined by the Lambda runtime](https://docs.aws.amazon.com/lambda/latest/dg/configuration-envvars.html#configuration-envvars-runtime). This provides a type-safe experience for working with environment variables that does not require typing `process.env` manually.
+
+<Callout info>
+
+**Note:** generated files are created before deployments when executing `ampx sandbox` or `ampx pipeline-deploy`
+
+</Callout>
+
+For example, if you have a function with the following definition:
+
+```ts title="amplify/functions/say-hello/resource.ts"
+import { defineFunction } from "@aws-amplify/backend";
+
+export const sayHello = defineFunction({
+  name: "say-hello",
+  environment: {
+    NAME: "World",
+  },
+});
+```
+
+Upon starting your next deployment, Amplify will create a file at the following location:
+
+```
+.amplify/generated/env/say-hello.ts
+```
+
+Using the TypeScript path alias, `$amplify`, you can import the file in your function's handler:
+
+```ts title="amplify/functions/say-hello/handler.ts"
+import { env } from "$amplify/env/say-hello"
+
+export const handler = async (event) => {
+  // the env object has intellisense for all environment variables that are available to the function
+  return `Hello, ${env.NAME}!`;
+};
+```
+
+Encountering issues with this file? [Visit the troubleshooting guide for `Cannot find module $amplify/env/<function-name>`](/[platform]/build-a-backend/troubleshooting/cannot-find-module-amplify-env/)
+
 ## Secrets
 
 Sometimes it is necessary to provide a secret value to a function. For example, it may need a database password or an API key to perform some business use case. Environment variables should NOT be used for this because environment variable values are included in plaintext in the function configuration. Instead, secret access can be used.