docs: add guide to use next-cloudinary with custom domain (#546)

# Description  ## Issue Ticket Number Fixes #405   ## Type of change  - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] Fix or improve the documentation - [ ] This change requires a documentation update # Checklist  - [x] I have followed the contributing guidelines of this project as mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md) - [x] I have created an [issue](https://github.com/cloudinary-community/next-cloudinary/issues) ticket for this PR - [x] I have checked to ensure there aren't other open [Pull Requests](https://github.com/cloudinary-community/next-cloudinary/pulls) for the same update/change? - [x] I have performed a self-review of my own code - [x] I have run tests locally to ensure they all pass - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes needed to the documentation --------- Co-authored-by: Colby Fayock <[email protected]>
cloudinary-community · Oct 11, 2024 · 113757f · 113757f
1 parent f5317ed
commit 113757f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/docs/pages/guides/_meta.json b/docs/pages/guides/_meta.json
@@ -7,5 +7,6 @@
   "responsive-images": "Responsive Images",
   "social-media-card": "Social Media Card",
   "text-overlays": "Text Overlays",
-  "uploading-images-and-videos": "Uploading Images & Videos"
+  "uploading-images-and-videos": "Uploading Images & Videos",
+  "using-custom-domains": "Using Custom Domains"
 }
diff --git a/docs/pages/guides/using-custom-domains.mdx b/docs/pages/guides/using-custom-domains.mdx
@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import Head from 'next/head';
+import { CldImage } from 'next-cloudinary';
+import OgImage from '../../components/OgImage';
+import styles from '../../styles/Docs.module.scss';
+import { Callout } from 'nextra-theme-docs';
+
+<Head>
+  <title>Using Next Cloudinary with Custom Domains</title>
+  <meta name="og:title" content="Using Next Cloudinary with Custom Domain" />
+  <meta name="og:url" content={`https://next.cloudinary.dev/guides/using-custom-domains`} />
+</Head>
+
+<OgImage
+  title="Using Custom Domains - Next Cloudinary"
+  twitterTitle="Using Next Cloudinary with Custom Domains"
+/>
+
+# Using Custom Domains
+
+When using Next Cloudinary with a custom domain in your Next.js application, you can serve your media assets with your own branded URLs. 
+
+<Callout type="info">
+  This feature is relevant only for users on Advanced plans or higher. Advanced plan users can request a custom domain with Cloudinary. [Learn more](https://support.cloudinary.com/hc/en-us/articles/202520562-Can-we-deliver-our-assets-using-a-subdomain-of-our-own-domain-like-cdn-example-com)
+</Callout>
+
+## Example
+
+Display images and videos using your custom domain with the `CldImage` or `CldVideoPlayer` component.
+
+```jsx
+<CldImage
+  src={src}
+  config={{
+    privateCdn: true, // Set to true when using a custom domain
+    secureDistribution: 'your-custom-domain.com', // Set your custom domain here
+  }}
+/>
+```
+
+## Learn More
+* [CldImage Config](/cldimage/configuration#config)
+* [CldVideoPlayer Config](/cldvideoplayer/configuration#configuration--delivery)