ContentSync Logo

Next.js/React integration example

Embedded media

Use the example below to get started with the auth token generation in combination with our auto-generated clients. The code below uses the REST client, but you can swap this out with the GraphQL client as well.

The following code assumes you are providing a couple of environment variables for the client to function. If you don’t have them yet, please follow the instructions in the Client generation section of your Content Cloud space in the Content Sync backend.

page.tsx
1
import {
2
ContentCloudPermission,
3
generateAccessToken,
4
} from './content-cloud/content-cloud-authentication'
5
import { ContentCloudRestClient } from './content-cloud/content-cloud-rest-client'
6
 
7
export default function Page() {
8
// You should add useMemo() here
9
const contentCloud = new ContentCloudRestClient({
10
accessToken: generateAccessToken({
11
permissions: [
12
ContentCloudPermission.CONTENT_READ,
13
],
14
services: [
15
ContentCloudService.LIVE,
16
ContentCloudService.ASSETS,
17
],
18
userId: 'test-user-id',
19
userDataContentTypes: ['*'],
20
}),
21
});
22
 
23
// Query for node.basic_page content
24
contentCloud.contentCollection({
25
content_type: "BasicPageContent", // Use auto-complete to check what types are available
26
}).then(response => {
27
// TODO: Use response.items to render something useful.
28
...
29
})
30
 
31
// Example query for system tags, e.g., to use in the metadata.tags filter
32
contentCloud.system.tagCollection({limit: 100}).then(page => ...);
33
}