chore: add serverComponentsExternalPackages callout for Next.js (#7757)

* chore: add serverComponentsExternalPackages callout for Next.js

* Apply suggestions from code review

Co-authored-by: Jim Blanchard <jim.l.blanchard@gmail.com>

* Apply suggestions from code review

* Update src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx

Co-authored-by: Jim Blanchard <jim.l.blanchard@gmail.com>

* Update src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx

Co-authored-by: josef <josef.aidt@gmail.com>

* Update src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx

Co-authored-by: josef <josef.aidt@gmail.com>

---------

Co-authored-by: Jim Blanchard <jim.l.blanchard@gmail.com>
Co-authored-by: josef <josef.aidt@gmail.com>

Author: 3 people

src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx

@@ -230,6 +230,30 @@ For the **GraphQL API** category, review [Connect to data from Server-side Runti
 
 </Callout>
 
+<Callout>
+
+**Note:** If you use the Amplify server-side APIs in a [server action](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and encounter the following error running `next build`:
+
+> ./node_modules/@aws-amplify/core/node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules
+
+> Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js
+
+You can add the following to your `next.config.js`:
+
+```ts title="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // highlight-start
+  experimental: {
+    serverComponentsExternalPackages: ['@aws-crypto'],
+  },
+  // highlight-end
+};
+```
+
+See Next.js documentation on [`serverComponentsExternalPackages`](https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages) for more details.
+</Callout>
+
 ### With Next.js App Router
 
 #### Dynamic rendering in React server component

src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx

@@ -232,6 +232,30 @@ For the **GraphQL API** category, review [Connect to GraphQL API from server-sid
 
 </Callout>
 
+<Callout>
+
+**Note:** If you use the Amplify server-side APIs in a [server action](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and encounter the following error running `next build`:
+
+> ./node_modules/@aws-amplify/core/node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules
+
+> Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js
+
+You can add the following to your `next.config.js`:
+
+```ts title="next.config.js"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // highlight-start
+  experimental: {
+    serverComponentsExternalPackages: ['@aws-crypto'],
+  },
+  // highlight-end
+};
+```
+
+See Next.js documentation on [`serverComponentsExternalPackages`](https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages) for more details.
+</Callout>
+
 ### With Next.js App Router
 
 #### In React Server Component