chore(docs): Refer to Next.js example

docs/pages/design/next/index.md

@@ -8,15 +8,25 @@ Design proposal on how to perform M2M auth for SaaS applications built with Next
 
 Clerk is used as the auth provider for this example. Although Clerk doesn't expose M2M auth at the time of writing this, the goal is to showcase how this would fit their product.
 
+A live example can be found at **[m2m-auth.vercel.app](https://m2m-auth.vercel.app/)** - [Source code](https://github.com/LauraBeatris/m2m-auth/tree/main/examples/m2m-auth-with-next)
+
+### Table of contents
+
+- [UI Component](#ui-component)
+- [UI utilities](#ui-utilities)
+- [Protecting route handlers](#protecting-route-handlers)
+- [With middleware](#with-middleware)
+- [Identify external client within the request](#identify-external-client-within-the-request)
+
 ### UI Component
 
 Managing keys in the UI should be as easy as rendering a component. Eliminating the need for developers to directly interact with the auth provider to build the UI from scratch.
 
 ```tsx
-import { KeysManager } from '@clerk/nextjs';
+import { ApiKeyManager } from '@clerk/nextjs';
 
 export default function Page() {
-  return <KeysManager />;
+  return <ApiKeyManager />;
 }
 ```
 

examples/m2m-auth-with-next/app/app/[id]/page.tsx

@@ -1,4 +1,4 @@
-import { KeysManager } from "@/app/clerk/components/KeysManager";
+import { ApiKeyManager } from "@/app/clerk/components/KeysManager";
 import { getAppById, getBaseUrl } from "@/app/constants";
 
 interface AppPageProps {
@@ -20,7 +20,7 @@ export default function AppPage({ params }: AppPageProps) {
     <main className="max-w-[400px] flex flex-col justify-start items-start gap-4">
       <h1 className="text-2xl text-gray-800 font-bold">{app?.name}</h1>
 
-      <KeysManager consumerId={app.id} />
+      <ApiKeyManager consumerId={app.id} />
 
       <div className="flex flex-col gap-2">
         <span>Test API route authenticating with your key:</span>

examples/m2m-auth-with-next/app/clerk/components/KeysManager.tsx

@@ -23,7 +23,7 @@ interface KeyModalProps {
  *
  * Managing API keys in the UI should be as easy as rendering a component, and letting Clerk take care of the rest.
  */
-export function KeysManager({ consumerId }: KeysManagerProps) {
+export function ApiKeyManager({ consumerId }: KeysManagerProps) {
   const [key, setKey] = useState<Key>();
 
   async function onCreateApiKey(formData: FormData) {