Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ NEXT_PUBLIC_CONTENTSTACK_API_KEY=your_api_key_here
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token_here
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=your_preview_token_here
NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=preview
NEXT_PUBLIC_CONTENTSTACK_REGION=EU # Options: EU or NA
NEXT_PUBLIC_CONTENTSTACK_REGION=EU # Options: NA, EU, AU, AZURE-NA, AZURE-EU, GCP-NA, GCP-EU
NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true # Set to true to enable preview
42 changes: 42 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,48 @@ NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=preview
NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true
```

## Regions and endpoint configuration

Set `NEXT_PUBLIC_CONTENTSTACK_REGION` to the region your Contentstack account is on. The value is case-insensitive.

| Region | Value |
|---|---|
| AWS North America | `NA` or `US` |
| AWS Europe | `EU` |
| AWS Australia | `AU` |
| Azure North America | `AZURE-NA` |
| Azure Europe | `AZURE-EU` |
| GCP North America | `GCP-NA` |
| GCP Europe | `GCP-EU` |

> Not sure which region you're on? Check your Contentstack dashboard URL — `eu-app.contentstack.com` means EU, `app.contentstack.com` means NA. Free developer accounts are on EU.

All API endpoints (content delivery, live preview, Visual Builder) are automatically resolved from your region. You do not need to set them manually.

The following endpoint keys are resolved per region and available if you ever need them directly via `getContentstackEndpoint` from `@contentstack/utils`:

| Key | NA value |
|---|---|
| `contentDelivery` | `cdn.contentstack.io` |
| `preview` | `rest-preview.contentstack.com` |
| `application` | `app.contentstack.com` |
| `graphqlDelivery` | `graphql.contentstack.com` |
| `graphqlPreview` | `graphql-preview.contentstack.com` |
| `images` | `images.contentstack.io` |
| `assets` | `assets.contentstack.io` |
| `contentManagement` | `api.contentstack.io` |
| `auth` | `auth-api.contentstack.com` |

### Custom or dedicated environments

If your Contentstack account runs on a dedicated or private cloud instance, the standard region-based endpoints may not apply. In that case, override each endpoint individually using these environment variables. **Only set these if instructed by Contentstack support — standard accounts should leave them unset.**

```bash
NEXT_PUBLIC_CONTENTSTACK_CONTENT_DELIVERY=your-custom-cdn.example.com
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_HOST=your-custom-preview.example.com
NEXT_PUBLIC_CONTENTSTACK_CONTENT_APPLICATION=your-custom-app.example.com
```

## Turn on Live Preview

Go to Settings > Live Preview. Click enable and select the `Preview` environment in the drop down. Hit save.
Expand Down
31 changes: 14 additions & 17 deletions lib/contentstack.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
// Importing Contentstack SDK and specific types for region and query operations
import contentstack, { QueryOperation } from "@contentstack/delivery-sdk";

// Importing Contentstack Live Preview utilities and stack SDK
// Importing Contentstack Live Preview utilities and stack SDK
import ContentstackLivePreview, { IStackSdk } from "@contentstack/live-preview-utils";

// Importing the Page type definition
// Importing the Page type definition
import { Page } from "./types";

// helper functions from private package to retrieve Contentstack endpoints in a convienient way
import { getContentstackEndpoints, getRegionForString } from "@timbenniks/contentstack-endpoints";
// helper functions to retrieve Contentstack endpoints for a given region
import { getContentstackEndpoint, type ContentstackEndpoints } from "@contentstack/utils";

export const isPreview = process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW === "true";

// Set the region by string value from environment variables
const region = getRegionForString(process.env.NEXT_PUBLIC_CONTENTSTACK_REGION as string)

// object with all endpoints for region.
const endpoints = getContentstackEndpoints(region, true)
const endpoints = getContentstackEndpoint(process.env.NEXT_PUBLIC_CONTENTSTACK_REGION || 'NA', '', true) as ContentstackEndpoints

export const stack = contentstack.stack({
// Setting the API key from environment variables
Expand All @@ -29,13 +26,13 @@ export const stack = contentstack.stack({
environment: process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT as string,

// Setting the region
// if the region doesnt exist, fall back to a custom region given by the env vars
// for internal testing purposes at Contentstack we look for a custom region in the env vars, you do not have to do this.
region: region ? region : process.env.NEXT_PUBLIC_CONTENTSTACK_REGION as any,
// for custom or dedicated Contentstack environments, override each endpoint individually using environment variables.
// You can omit this if you have set a region above. Use @contentstack/utils getContentstackEndpoint to get the right urls for your region.
region: process.env.NEXT_PUBLIC_CONTENTSTACK_REGION as any,

// Setting the host for content delivery based on the region or environment variables
// This is done for internal testing purposes at Contentstack, you can omit this if you have set a region above.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_CONTENT_DELIVERY || endpoints && endpoints.contentDelivery,
// for custom or dedicated Contentstack environments, override each endpoint individually using environment variables.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_CONTENT_DELIVERY || endpoints.contentDelivery as string,

live_preview: {
// Enabling live preview if specified in environment variables
Expand All @@ -45,8 +42,8 @@ export const stack = contentstack.stack({
preview_token: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN,

// Setting the host for live preview based on the region
// for internal testing purposes at Contentstack we look for a custom host in the env vars, you do not have to do this.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_HOST || endpoints && endpoints.preview
// for custom or dedicated Contentstack environments, override each endpoint individually using environment variables.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_PREVIEW_HOST || endpoints.preview as string
}
});

Expand All @@ -63,8 +60,8 @@ export function initLivePreview() {
},
clientUrlParams: {
// Setting the client URL parameters for live preview
// for internal testing purposes at Contentstack we look for a custom host in the env vars, you do not have to do this.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_CONTENT_APPLICATION || endpoints && endpoints.application
// for custom or dedicated Contentstack environments, override each endpoint individually using environment variables.
host: process.env.NEXT_PUBLIC_CONTENTSTACK_CONTENT_APPLICATION || endpoints.application as string
},
editButton: {
enable: true, // Enabling the edit button for live preview
Expand Down
44 changes: 19 additions & 25 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "kickstart-next",
"version": "1.0.21",
"version": "1.1.0",
"private": false,
"repository": {
"type": "git",
Expand All @@ -20,8 +20,8 @@
"dependencies": {
"@contentstack/delivery-sdk": "^5.2.1",
"@contentstack/live-preview-utils": "^4.4.4",
"@timbenniks/contentstack-endpoints": "^3.0.2",
"isomorphic-dompurify": "^3.17.0",
"@contentstack/utils": "^1.9.1",
"isomorphic-dompurify": "3.17.0",
"next": "^16.2.9",
"react": "^19.2.7",
"react-dom": "^19.2.7"
Expand Down
Loading