cms-sitefinity

A statically generated blog example using Next.js and Sitefinity CMS

This is the existing cms-sitefinity plus TypeScript. This example showcases Next.js's Static Generation feature using Sitefinity CMS as the data source.

Demo

https://next-cms-sitefinity.vercel.app/

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Related examples

• AgilityCMS
• Builder.io
• ButterCMS
• Contentful
• Cosmic
• DatoCMS
• DotCMS
• Drupal
• Enterspeed
• Ghost
• GraphCMS
• Kontent.ai
• MakeSwift
• Payload
• Plasmic
• Prepr
• Prismic
• Sanity
• Sitecore XM Cloud
• Sitefinity
• Storyblok
• TakeShape
• Tina
• Umbraco
• Umbraco heartcore
• Webiny
• WordPress
• Blog Starter

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example cms-sitefinity cms-sitefinity-app

yarn create next-app --example cms-sitefinity cms-sitefinity-app

pnpm create next-app --example cms-sitefinity cms-sitefinity-app

Configuration

Step 1. Setup the CMS locally (version >=14.27922)

First, install and run the CMS Locally.

Step 2. Import the ready to use dynamic module 'Posts'

For the purpose of this demo a ready to use dynamic module was build containing two types - 'Post' and 'Author'.

In order to install it:

1. Open the CMS Administration under (/Sitefinity)
2. Open the Export/Import screen under (/Sitefinity/Administration/Packaging)
3. Click on Import Zip file and import the file from the sitefinity folder

Step 3. Enable the web service

By default the web services are not allowed for anonymous users, so the yhave to be enabled.

Go to /sitefinity/Administration/WebServices and edit the 'Default' web service to allow it to be accessible by 'Everyone'

Step 4. Install the GraphQL package

1. Add the Sitefinity CMS nugget source
2. Install the Progress.Sitefinity.GraphQL package (enable prerelease filter).

Step 5. Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local

• SF_API_URL - This is the url of the 'Default' web service that we configured earlier. E.g. http://locahost/api/default/
• SF_URL - This is the URL of the CMS itself. E.g. http://localhost/

Step 6. Run Next.js in development mode

npm install
npm run dev

# or

yarn
yarn dev

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.