{"id":23380647,"url":"https://github.com/agility/agilitycms-nextjs-ssr-starter","last_synced_at":"2025-06-25T21:35:36.018Z","repository":{"id":97728481,"uuid":"377606706","full_name":"agility/agilitycms-nextjs-ssr-starter","owner":"agility","description":"A starter website using Agility CMS with Next.js in SSR (Server Side Rendering) mode.","archived":false,"fork":false,"pushed_at":"2021-07-09T20:12:04.000Z","size":367,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T07:43:23.092Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-16T19:31:59.000Z","updated_at":"2021-07-09T20:12:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"0e7b4a5b-a26e-416d-8f64-48bdbe70a4cd","html_url":"https://github.com/agility/agilitycms-nextjs-ssr-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/agility/agilitycms-nextjs-ssr-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-nextjs-ssr-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-nextjs-ssr-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-nextjs-ssr-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-nextjs-ssr-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agility","download_url":"https://codeload.github.com/agility/agilitycms-nextjs-ssr-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-nextjs-ssr-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261957965,"owners_count":23236376,"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.277Z","updated_at":"2025-06-25T21:35:35.951Z","avatar_url":"https://github.com/agility.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Agility CMS \u0026 Next.js Starter for Server Side Rendering (SSR)\n\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 in SSR mode.\n\n\n[Live Website Demo](https://agilitycms-nextjs-starter-blog.vercel.app/)\n\n[New to Agility CMS? Sign up for a FREE account](https://agilitycms.com/free)\n\n## About This Starter\n\n- Uses our [`@agility/next`](https://github.com/agility/agility-next) package to make getting started with Agility CMS and Next.js easy\n- Connected to a sample Agility CMS Instance for sample content \u0026 pages\n- Uses `getServerSideProps` method to retrieve data from Agility CMS\n- Supports [`next/image`](https://nextjs.org/docs/api-reference/next/image) for image optimization\n- Supports full [Page Management](https://help.agilitycms.com/hc/en-us/articles/360055805831)\n- Supports Preview Mode\n- Provides a functional structure that dynamically routes each page based on the request, loads a Page Templates dynamically, and also dynamically loads and renders appropriate Agility CMS Page Modules (as React components)\n\n### Tailwind CSS\n\nThis starter uses [Tailwind CSS](https://tailwindcss.com/), a simple and lightweight utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.\n\nIt also comes equipped with [Autoprefixer](https://www.npmjs.com/package/autoprefixer), a plugin which use the data based on current browser popularity and property support to apply CSS prefixes for you.\n\n### TypeScript\n\nThis starter supports [TypeScript](https://nextjs.org/docs/basic-features/typescript) out of the box. If you would like to use TypeScript in your project, simply rename your files with a `.ts` extension to start taking advantage of Typescript concepts such as types and interfaces to help describe your data.\n\n## Getting Started\n\nTo start using the Agility CMS \u0026 Next.js Starter, [sign up](https://agilitycms.com/free) for a FREE account and create a new Instance using the Blog Template.\n\n1. Clone this repository\n2. Run `npm install` or `yarn install`\n3. Rename the `.env.local.example` file to `.env.local`\n4. Retrieve your `GUID`, `API Keys (Preview/Fetch)`, and `Security Key` from Agility CMS by going to [Settings \u003e API Keys](https://manager.agilitycms.com/settings/apikeys).\n\n[How to Retrieve your GUID and API Keys from Agility](https://help.agilitycms.com/hc/en-us/articles/360031919212-Retrieving-your-API-Key-s-Guid-and-API-URL-)\n\n## Running the Site Locally\n\n### Development Mode \n\nWhen running your site in `development` mode, you will see the latest content in real-time from the CMS.\n\n#### yarn\n\n1. `yarn install`\n2. `yarn dev`\n\nTo update content locally without restarting your dev server, run `yarn cms-pull`\n\nTo clear your content cache locally, run `yarn cms-clear`\n\n#### npm\n\n1. `npm install`\n2. `npm run dev`\n\nTo update content locally without restarting your dev server, run `npm run cms-pull`\n\nTo clear your content cache locally, run `npm run cms-clear`\n\n### Production Mode\n\nWhen running your site in `production` mode, you will see the published from the CMS.\n\n#### yarn\n\n1. `yarn build`\n2. `yarn start`\n\n#### npm\n\n1. `npm run build`\n2. `npm run start`\n\n## Deploying Your Site\n\nThe easiest way to deploy a Next.js website to production is to use [Vercel](http://vercel.com/) from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static \u0026 Jamstack deployment and Serverless Functions.\n\n\u003ca href=\"https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fjoshua-isaac%2Fagility-nextjs-starter\"\u003e\u003cimg src=\"https://vercel.com/button\" alt=\"Deploy with Vercel\"/\u003e\u003c/a\u003e\n\nBy clicking the button above, you can get this starter repo deployed to Vercel with a Preview Environment within minutes! It will prompt you to enter your `AGILITY_GUID`, `AGILITY_API_FETCH_KEY`, `AGILITY_API_PREVIEW_KEY` and your `AGILITY_SECURITY_KEY`.\n\n## Notes\n\n### How to Register Page Modules\n\n1. To create a new Page Module, create a new React component within the `/components/agility-pageModules` directory.\n2. All of the Page Modules that are being used within the site need to be imported into the `index` file within the `/components/agility-pageModules` directory and added to the `allModules` array:\n\n```\nimport RichTextArea from \"./RichTextArea\";\nimport FeaturedPost from \"./FeaturedPost\";\nimport PostsListing from \"./PostsListing\";\nimport PostDetails from \"./PostDetails\";\nimport Heading from \"./Heading\";\nimport TextBlockWithImage from \"./TextBlockWithImage\";\n\nconst allModules = [\n  { name: \"TextBlockWithImage\", module: TextBlockWithImage },\n  { name: \"Heading\", module: Heading },\n  { name: \"FeaturedPost\", module: FeaturedPost },\n  { name: \"PostsListing\", module: PostsListing },\n  { name: \"PostDetails\", module: PostDetails },\n  { name: \"RichTextArea\", module: RichTextArea },\n];\n```\n\n### How to Register Page Templates\n\n1. To create a new Page Template, create a new React component within the `/components/agility-pageTemplates` directory.\n2. All of the Page Template that are being used within the site need to be imported into the `index` file within the `/components/agility-pageTemplates` directory and added to the `allTemplates` array:\n\n```\nimport MainTemplate from \"./MainTemplate\";\n\nconst allTemplates = [\n  { name: \"MainTemplate\", template: MainTemplate }\n];\n```\n\n### How to Properly Link to an Internal Page\n\nTo link to internal pages, use the `next/link` component.\n\n```\nimport Link from 'next/link';\n\n//where '[...slug]' is the catch-all dynamic page we have (pages/[...slug].js) and '/posts' is the actual real page path for the page\n\u003cLink href=\"/posts\"\u003e\n  \u003ca\u003e{item.fields.title}\u003c/a\u003e\n\u003c/Link\u003e\n```\n\n### How to Preview Content\n\nSince this is a static site, how can editors preview content in real-time as they are making edits within Agility CMS? Vercel supports Previews out of the box! Simply paste the address of your site deployed on Vercel into your Agility Sitemap Configuration (Settings \u003e Sitemaps), and use it as your Preview Deployment.\n\n## Resources\n\n### Agility CMS\n- [Official site](https://agilitycms.com)\n- [Documentation](https://help.agilitycms.com/hc/en-us)\n\n### Next.js\n- [Official site](https://nextjs.org/)\n- [Documentation](https://nextjs.org/docs/getting-started)\n\n### Vercel\n- [Official site](https://vercel.com/)\n\n### Tailwind CSS\n- [Official site](http://tailwindcss.com/)\n- [Documentation](http://tailwindcss.com/docs)\n\n### Community\n- [Official Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI)\n- [Blog](https://agilitycms.com/resources/posts)\n- [GitHub](https://github.com/agility)\n- [Forums](https://help.agilitycms.com/hc/en-us/community/topics)\n- [Facebook](https://www.facebook.com/AgilityCMS/)\n- [Twitter](https://twitter.com/AgilityCMS)\n\n## Feedback and Questions\nIf you have feedback or questions about this starter, please use the [Github Issues](https://github.com/agility/agilitycms-nextjs-starter/issues) on this repo, join our [Community Slack Channel](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) or create a post on the [Agility Developer Community](https://help.agilitycms.com/hc/en-us/community/topics).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-nextjs-ssr-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagility%2Fagilitycms-nextjs-ssr-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-nextjs-ssr-starter/lists"}