docs: adds examples docs

docs/live-preview/client.mdx

@@ -7,7 +7,7 @@ keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, us
 ---
 
 <Banner type="info">
-  If your front-end application supports Server Components like the [Next.js App Router](https://nextjs.org/docs/app), etc., we suggest setting up [server-side Live Preview](./server).
+  If your front-end application supports Server Components like the [Next.js App Router](https://nextjs.org/docs/app), etc., we suggest setting up [server-side Live Preview](./server) instead.
 </Banner>
 
 While using Live Preview, the Admin panel emits a new `window.postMessage` event every time your document has changed. Your front-end application can listen for these events and re-render accordingly.

docs/live-preview/frontend.mdx

@@ -6,11 +6,11 @@ desc: Learn how to implement Live Preview in your front-end application.
 keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, useLivePreview
 ---
 
-There are two ways to use Live Preview in your own application depending on whether your front-end framework supports server components:
+There are two ways to use Live Preview in your own application depending on whether your front-end framework supports Server Components:
 
 - [Server-side Live Preview (suggested)](./server)
 - [Client-side Live Preview](./client)
 
 <Banner type="info">
-  We suggest using server-side Live Preview if your framework supports it, it is both simpler to setup and more performant to run than the client-side alternative.
+  We suggest using server-side Live Preview if your framework supports Server Components, it is both simpler to setup and more performant to run than the client-side alternative.
 </Banner>

docs/live-preview/server.mdx

@@ -20,7 +20,7 @@ If your front-end application is built with [React](#react), you can use the `Re
 
 ## React
 
-If your front-end application is built with [React](https://react.dev) or [Next.js](https://nextjs.org), you can use the `RefreshRouteOnSave` component that Payload provides.
+If your front-end application is built with server-side [React](https://react.dev) like [Next.js App Router](https://nextjs.org/docs/app), you can use the `RefreshRouteOnSave` component that Payload provides.
 
 First, install the `@payloadcms/live-preview-react` package:
 
@@ -28,7 +28,7 @@ First, install the `@payloadcms/live-preview-react` package:
 npm install @payloadcms/live-preview-react
 ```
 
-Then, render `RefreshRouteOnSave` anywhere in your `page.tsx`. Here's an example:
+Then, render the `RefreshRouteOnSave` component anywhere in your `page.tsx`. Here's an example:
 
 `page.tsx`:
 
@@ -64,7 +64,13 @@ import React from 'react'
 
 export const RefreshRouteOnSave: React.FC = () => {
   const router = useRouter()
-  return <PayloadLivePreview refresh={router.refresh} serverURL={process.env.PAYLOAD_SERVER_URL} />
+
+  return (
+    <PayloadLivePreview
+      refresh={() => router.refresh()}
+      serverURL={process.env.NEXT_PUBLIC_PAYLOAD_URL}
+    />
+  )
 }
 ```
 
@@ -153,13 +159,15 @@ export const RefreshRouteOnSave: React.FC<{
 
 ## Example
 
-{/* TODO: add example once beta has been release and an example can be created */}
+For a working demonstration of this, check out the official [Live Preview Example](https://github.com/payloadcms/payload/tree/main/examples/live-preview/payload). There you will find a fully working example of how to implement Live Preview in your Next.js App Router application.
 
 ## Troubleshooting
 
 ### Updates do not appear as fast as client-side Live Preview
 
-If you are noticing that updates feel less snappy than client-side Live Preview (i.e. the `useLivePreview` hook), this is because of how the two differ in how they work—instead of emitting events against form state as you type, server-side Live Preview refreshes the route after a new document is saved. You can use autosave to mimic this effect. Try decreasing the value of `versions.autoSave.interval` to make the experience feel more responsive:
+If you are noticing that updates feel less snappy than client-side Live Preview (i.e. the `useLivePreview` hook), this is because of how the two differ in how they work—instead of emitting events against _form state_, server-side Live Preview refreshes the route after a new document is _saved_.
+
+Use [Autosave](../versions/autosave) to mimic this effect server-side. Try decreasing the value of `versions.autoSave.interval` to make the experience feel more responsive:
 
 ```ts
 // collection.ts