Next.js Standalone Page

Standalone Page Integration Tutorial

How it works:

• Add CMS content to an existing page in the site
• Generate a JSON object for that page on publish
• On page view:
  • Load the JSON object and render it in a template

Standalone Page Limitations:

• Standalone pages need to be configured one-at-a-time in the CMS

Overview:

Standalone Integration can be used to add editable CMS content areas to existing individual pages in an application.  This can be used together with, or apart from, a site with a Router Integration.

Integration:

1. In the jsHarmony CMS, on the Sites tab, create a new Site
   * Skip steps 1-2 if you already have a jsHarmony site configured for this application
   
   
2. In the Site Settings, add a Deployment Target:
   1. Configure the Deployment Target to publish to a location that is publicly accessible from the Next.js application (for example, an S3 bucket, Github Pages, a public website folder, or an Apache virtual subfolder)
   2. Set the URL Prefix to the publicly accessible URL path where the CMS Content files (HTML, JSON, Images) will be published, for example "https://domain.com/path/"
      
      
3. Generate the Integration Code:
   1. In the Deployment Target, click on the "Integration Code" tab
   2. Select the Environment "Next.js - Standalone" to get the Integration Code
      
      
4. In your Next.js application, install the "jsharmony-cms-sdk-next" module:

   npm install jsharmony-cms-sdk-next

5. Add the Integration Code from step 4 to your Next.js page (example below).
   

   import type { GetServerSideProps } from 'next';
   import { JshCms, JshCmsRouter, JshCmsPage, JshCmsContentArea } from 'jsharmony-cms-sdk-next'
   
   const jshCmsConfig = new {
       redirectListingPath: "jshcms_redirects.json",
       cmsServerUrls: ["https://cms.example.com/"],
       contentUrl: "https://domain.com/path/to/content/"
   };
   
   const jshCmsRouter = new JshCmsRouter(jshCmsConfig);
   
   export const getServerSideProps: GetServerSideProps = async(context) => {
     const jshCmsPage = await jshCmsRouter.getStandalonePage(context.resolvedUrl, context.query); // or ('/cms_page_path', context.query)
     return { props: { jshCmsPage } };
   };
   
   export default function Page({ jshCmsPage }: { jshCmsPage: JshCmsPage }) {
     return (
       <JshCms jshCmsPage={jshCmsPage} jshCmsConfig={jshCmsConfig}>
         <h1 cms-title="true">{jshCmsPage?.title||'Title'}</h1>
         <JshCmsContentArea cms-content="body">Page Content</JshCmsContentArea>
       </JshCms>
     );
   };
   

6. In order to publish multiple content areas, configure the page config in the standalone page's JshCmsPageConfig component:
   

   export default function Page({ jshCmsPage }: { jshCmsPage: JshCmsPage }) {
     return (
       <JshCms jshCmsPage={jshCmsPage} jshCmsConfig={jshCmsConfig}>
         <JshCmsPageConfig config={{
           content: {
             col1: { title: "Column 1" },
             col2: { title: "Column 2" }
           }
         }} />
         <h1 cms-title="true">{jshCmsPage?.title||'Title'}</h1>
         <JshCmsContentArea cms-content="col1">Column 1</JshCmsContentArea>
         <JshCmsContentArea cms-content="col2">Column 2</JshCmsContentArea>
       </JshCms>
     );
   };

7. In the CMS, add the standalone page to the Sitemap:
   
   1. On the Pages tab, add a new page
   2. Set the Template to "<Standalone>"
   3. Set the Template Path to the full URL of the standalone page
      
      
8. Edit the page content in the CMS, and publish to the Deployment Target, generating the JSON file and images on the content server.