diff --git a/src/fragments/lib/ssr/js/getting-started.mdx b/src/fragments/lib/ssr/js/getting-started.mdx
index 15826c8ad3c..5a009120a5a 100644
--- a/src/fragments/lib/ssr/js/getting-started.mdx
+++ b/src/fragments/lib/ssr/js/getting-started.mdx
@@ -1,3 +1,7 @@
+import nextCallout from "/src/fragments/lib/ssr/js/next-js-callout.mdx";
+
+<Fragments fragments={{ js: nextCallout }} />
+
 To work well with server-rendered pages, Amplify JS requires slight modifications from how you would use it in a client-only environment.
 
 ## Amplify
diff --git a/src/fragments/lib/ssr/js/next-js-callout.mdx b/src/fragments/lib/ssr/js/next-js-callout.mdx
new file mode 100644
index 00000000000..85fe4b6bafd
--- /dev/null
+++ b/src/fragments/lib/ssr/js/next-js-callout.mdx
@@ -0,0 +1,5 @@
+<Callout>
+
+SSR functionality in Amplify was primarily built for compatibility with Next.js [page components](https://nextjs.org/docs/basic-features/pages), and their [getServerSideProps data fetching mechanism](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props). Compatibility with other frameworks or Next.js features cannot be guaranteed.
+
+</Callout>
\ No newline at end of file
diff --git a/src/fragments/start/getting-started/next/api.mdx b/src/fragments/start/getting-started/next/api.mdx
index 6b7af054237..18fec51f5a7 100644
--- a/src/fragments/start/getting-started/next/api.mdx
+++ b/src/fragments/start/getting-started/next/api.mdx
@@ -206,6 +206,10 @@ query ListPosts {
 
 ## API with Server-Side Rendering (SSR)
 
+import nextCallout from "/src/fragments/lib/ssr/js/next-js-callout.mdx";
+
+<Fragments fragments={{ next: nextCallout }} />
+
 In this section you will create a way to list and create posts from the Next.js application. To do this, you will fetch & render the latest posts from the server as well as create a new post on the client.
 
 Ensure you have the following libraries installed: