{"id":23380653,"url":"https://github.com/agility/agilitycms-next-starter-ssg","last_synced_at":"2025-04-10T22:42:57.777Z","repository":{"id":44010352,"uuid":"235466062","full_name":"agility/agilitycms-next-starter-ssg","owner":"agility","description":"A sample NextJS site using a blog template, supporting Static Site Generation, and Preview","archived":false,"fork":false,"pushed_at":"2023-01-05T16:23:41.000Z","size":761,"stargazers_count":17,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T19:39:44.579Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://agility-next-starter-ssg.netlify.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agility.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-22T00:06:37.000Z","updated_at":"2021-03-28T23:54:40.000Z","dependencies_parsed_at":"2023-02-04T07:02:04.012Z","dependency_job_id":null,"html_url":"https://github.com/agility/agilitycms-next-starter-ssg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-next-starter-ssg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-next-starter-ssg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-next-starter-ssg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-next-starter-ssg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agility","download_url":"https://codeload.github.com/agility/agilitycms-next-starter-ssg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312208,"owners_count":21082638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T20:17:30.620Z","updated_at":"2025-04-10T22:42:57.752Z","avatar_url":"https://github.com/agility.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e `Deprecation Notice`=\u003e This example uses the Agility Fetch API which requests data on-demand in real-time. We now recommend using the Sync API which is documented in our [new Next.js starter](https://github.com/agility/agilitycms-nextjs-starter-2020).\n\n# Next.js + Agility CMS + SSG \nThis is sample Next.js starter site that uses Agility CMS and aims to be a foundation for building fully static sites using Next.js and Agility CMS.\n\n\u003e NextJS Preview is now supported! Docs coming soon...\n\n[Live Website Demo (Zeit)](https://agility-next-starter-ssg.netlify.com/)\n\n[New to Agility CMS? Signup for a free account](https://agilitycms.com/free)\n\n# Why use Next.js as an SSG (Static Site Generator)\nNext.js traditionaly provides two ways to run your Next.js web app.\n1. SSR (Server Side Rendering)\n2. Static HTML\n\nAs of v9.3, Next.js supports a third alternative - **Static Site Generator**.\n\nIf you are using *Server Side Rendering* (i.e. via `getInitialProps`) then your app runs JavaScript on the server as well as client (also referred to as an isomorphic app). This means you need to run a node.js web server as requests are processed at runtime and rendered. This means you need to manage the performance of your web app and the scaling problems that can come with it. If you want the most performant site possible, this will be challenging.\n\nIf you are not using `getInitialProps`, and you don't require any external data on load, then lucky for you, you can deploy this to a static host already (**Static HTML**). Unfortunately, for most sites this is not possible.\n\nNow, with Next.js you can run a cmd `npm run export` which will run through your site and export the SSR pages as static html. This is great, because you can host the output on a static web host, but your code in `getIntitialProps` still runs on the client, so if you have any slow external data resources, they will still be visible to the end user.\n\nWouldn't it be great if we could just take an entire snapshot of a website and render it to static html and have any external data that we need just be stored in static JSON files? That is precisely why Next.js has introduced this feature.\n\nFor more detailed information around the update, please see [Static Generation/SSG Improvements](https://github.com/zeit/next.js/issues/9524).\n\n# Benefits of SSG\n- Best possible performance\n- Secure - your website and its data become immutable\n- Reliable and Accurate - your content and code become combined in your deployments\n- Cheaper hosting \n\n# About\n- connected to a sample Agility CMS instance to get content and pages\n- uses the `getStaticProps` function from Next.js to allow for full static site generation\n- supports full page management\n- provides a functional structure that dynamically routes each page based on the request, loads a page template dynamically, and also dynamically loads and renders appropriate Agility CMS modules (as React components)\n\n# Get Started\nSign up for an [Agility CMS Blog Starter](https://account.agilitycms.com/sign-up?product=agility-free) instance.\n\n1. Clone this repository\n2. Run `npm install`\n3. Run `npm run dev`\n4. Modify the `agility.config.js` and place your own *guid* and *apiKeys* (if you want to test this with your own instance - must be using the Blog Template) - you can also run it with the sandbox credentials provided\n\n# Deploy\n[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/agility/agilitycms-next-starter-ssg)\n\n☝️ Deploy this starter repo in just minutes with [ZEIT](https://zeit.co/). It will prompt you to enter your `AGILITY_GUID`, , `AGILITY_API_FETCH_KEY`, `AGILITY_API_PREVIEW_KEY`, and `AGILITY_SECURITY_KEY`.\n\n# Notes\n## How to Properly Link to a Page\nBecause we are using *dynamic pages* along with a catch-all route in Next.js, you'll need to use the following `\u003cLink\u003e` method to properly provide links to other dynamic pages while still having the client-side router pick them up. There is a current [issue](https://github.com/zeit/next.js/issues/8207) (as of v9.21) open for this for Next.js to handle it better, but for now you'll need to do this:\n``` javascript\nimport Link from 'next/link';\n\n//where '[...slug]' is the catch-all dynamic page we have (pages/[...slug].js)\n// and '/posts' is the actual real page path for the page\n\u003cLink href=\"[...slug]\" as=\"/posts\"\u003e\u003ca\u003e{item.fields.title}\u003c/a\u003e\u003c/Link\u003e\n```\n\n## How to Preview Content?\nSince this is a static app, how can editors preview content in realtime as they are making them in the CMS? Zeit Now apparantly will support a great way to do this, but until then, you can run this in development mode (`npm run dev`) in a container on a web server. This ensures that the requests for each page are done at runtime.\n\n\u003e Native support for Preview with NextJS/Zeit is now enabled, documentation coming soon.\n\nThis repo is set up work with Azure Dev Ops (_azure-pipelines.yml_) and Docker (_DockerFile). This allows you to use Docker to build an image, and then push it to the Azure Container Registry of your choice. An Azure App Service that you setup would simply use the Registry to enable Continuous Deployment.\n\n### Using Docker and Azure\n\n1. Create an Azure Container Registry\n```\naz acr create --resource-group myResourceGroup --name \u003cazureContainerRegistry\u003e --sku Basic\n```\n\n2. Login to Azure Container Registry\n\nIf you are a user:\n```\naz acr login --name \u003cazureContainerRegistryFQDN\u003e\n```\n\nIf you need to authenticate using an Azure Service Principal\n```\ndocker login --name \u003cazureContainerRegistryFQDN\u003e/\u003cnameOfImage\u003e  -u \u003cs_AppId\u003e -p \u003cs_Password\u003e\n```\n\n3. Build the docker image locally\n```\ndocker image build -t \u003cazureContainerRegistryFQDN\u003e/\u003cnameOfImage\u003e .   \n```\n\n4. Push the docker image\n```\ndocker push \u003cazureContainerRegistryFQDN\u003e/\u003cnameOfImage\u003e\n```\n\n5. Create an Azure App Service Plan and Web App (Linux, using Docker Container)\n\n| TODO: provide cli instructions\n\n6. Ensure you have Continuous Deployment turned on - this will ensure pushes to your Azure Container Registry with the tag 'latest' will get pushed to your Azure App Service web app and deployed automatically.\n\n| TODO: add link\n\n#### Streaming Logs from Azure App Service Container\nYou can stream logs from the Azure App Service that is running your container using the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest).\n\n1. Login to **Azure CLI** using your personal *Azure Account*:\n  ```\n  az login\n  ```\n  Or, use a *Service Principal* to login:\n  ```\n  az login --service-principal --username \u003cAPP_ID\u003e --password \u003cPASSWORD\u003e --tenant \u003cTENANT_ID\u003e\n  ```\n  \n2. Select your **Azure Subscription**\n  ```\n  az account set --subscription \u003cSUBSCRIPTIONNAME\u003e\n  ```\n  \n3. Stream Web Logs:\n  ```\n  az webapp log tail --resource-group \u003cRESOURCEGROUP\u003e --name \u003cAPPSERVICENAME\u003e\n  ```\n  \n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-next-starter-ssg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagility%2Fagilitycms-next-starter-ssg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-next-starter-ssg/lists"}