{"id":21169038,"url":"https://github.com/cosmicjs/next-merge","last_synced_at":"2025-07-09T18:31:44.549Z","repository":{"id":37045511,"uuid":"315986356","full_name":"cosmicjs/next-merge","owner":"cosmicjs","description":"A Next.js blog with the Cosmic merge preview workflow capability","archived":false,"fork":false,"pushed_at":"2022-07-08T21:39:07.000Z","size":236,"stargazers_count":1,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-05T04:51:14.947Z","etag":null,"topics":["cosmicjs","headlesscms","nextjs","reactjs","vercel"],"latest_commit_sha":null,"homepage":"https://www.cosmicjs.com/apps/next-merge","language":"TypeScript","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/cosmicjs.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-11-25T15:53:54.000Z","updated_at":"2022-07-08T19:42:02.000Z","dependencies_parsed_at":"2022-06-25T05:02:38.091Z","dependency_job_id":null,"html_url":"https://github.com/cosmicjs/next-merge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cosmicjs/next-merge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnext-merge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnext-merge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnext-merge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnext-merge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cosmicjs","download_url":"https://codeload.github.com/cosmicjs/next-merge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cosmicjs%2Fnext-merge/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502387,"owners_count":23618587,"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":["cosmicjs","headlesscms","nextjs","reactjs","vercel"],"created_at":"2024-11-20T15:22:09.431Z","updated_at":"2025-07-09T18:31:44.055Z","avatar_url":"https://github.com/cosmicjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A statically generated blog example using Next.js, Cosmic, and Cosmic Merge preview capabilities\n\nThis example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Cosmic](https://cosmicjs.com/) as the data source. Now with TypeScript!\n\nIncludes [Cosmic merge request](https://www.cosmicjs.com/blog/introducing-merge-requests) preview giving you the ability to do bulk updates between Buckets, see bulk update previews, get approvals from other team members, and more.\n\n\n## Demo\n\n[https://cosmic-next-blog.vercel.app/](https://cosmic-next-blog.vercel.app/)\n\n## Deploy your own\n\nOnce you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example):\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1\u0026s=https://github.com/cosmicjs/next-merge\u0026env=COSMIC_BUCKET_SLUG,COSMIC_READ_KEY,COSMIC_PREVIEW_SECRET\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Cosmic\u0026envLink=https://vercel.link/cms-cosmic-env)\n\n## What is Cosmic Merge Requests?\nCosmic Merge Requests is a feature in the [Cosmic headless CMS](https://www.cosmicjs.com/features) that enables you to do bulk edits, preview, and approval workflows for content updates. Learn more about merge requests in the [Cosmic blog announcement](https://www.cosmicjs.com/blog/introducing-merge-requests).\n\nUses [SWR](https://swr.vercel.app/) for instant previews on content updates in preview mode.\n\n\n## How to use\n\nClone the repo to install and bootstrap the example:\n\n```bash\ngit clone https://github.com/cosmicjs/next-merge\n```\n\n## Configuration\n\n### Step 1. Create an account and a project on Cosmic\n\nFirst, [create an account on Cosmic](https://cosmicjs.com).\n\n### Step 2. Install the Next.js Merge Blog\n\nAfter creating an account, install the [Next.js Merge Blog](https://www.cosmicjs.com/apps/nextjs-merge-blog) app from the Cosmic App Marketplace.\n\n### Step 3. Set up environment variables\n\nGo to the **Settings** menu at the sidebar and click **Basic Settings**.\n\nNext, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):\n\n```bash\ncp .env.local.example .env.local\n```\n\nThen set each variable on `.env.local`:\n\n- `COSMIC_BUCKET_SLUG` should be the **Bucket slug** key under **Basic Settings**.\n- `COSMIC_READ_KEY` should be the **Read Key** under **API Access**.\n- `COSMIC_PREVIEW_SECRET` can be any random string (but avoid spaces) - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).\n\nYour `.env.local` file should look like this:\n\n```bash\nCOSMIC_BUCKET_SLUG=...\nCOSMIC_READ_KEY=...\nCOSMIC_PREVIEW_SECRET=...\n```\n\n### Step 4. Run Next.js in development mode\n\n```bash\nnpm install\nnpm run dev\n\n# or\n\nyarn install\nyarn dev\n```\n\nYour blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).\n\n### Step 5. Try Merge preview mode\n\nTo add the ability to preview content from a merge request, follow these steps:\n\n1. To clone a Bucket into your Project, go to \u003ci\u003eYour Bucket \u003e Basic Settings\u003c/i\u003e, scroll down, and click \"Clone Bucket\".\n2. After cloning your Bucket, create a new merge request in your Bucket project clicking the \"Add Merge Request\" button on the Dasboard\n3. Select the Source Bucket (Staging) and your Target Bucket (Production). Click \"Review Changes\".\n4. There shouldn't be any changes to preview yet. Now add your merge Preview Link exactly the following and click \"Save\":\n```\nhttp://localhost:3000?merge_id=[merge_id]\n```\nThe `[merge_id]` shortcode will be converted into the merge request id which will be used to get the Objects in the merge request.\n\n4. Add / Edit content in your Staging Bucket. Any edits to Objects, Object Types, and Media will be added to the merge request (deleting content does not affect it).\n5. After adding and editing content in staging, go back to your merge request and notice the Changes to Objects, Object Types, and / or Media.\n6. Click the \"Preview\" button to see content from the merge request now visible in your locally running app.\n7. Make more changes in your Staging Bucket and see real time updates in the app thanks to [SWR](https://swr.vercel.app/) :)\n\nTo exit preview mode, you can click on **You are previewing merge content. Click here to remove** at the top.\n\n### Step 6. Deploy on Vercel\n\nYou can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-merge-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n#### Deploy Your Local Project\n\nTo deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-merge-example).\n\n**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n\n#### Deploy from Our Template\n\nAlternatively, you can deploy using this template by clicking on the Deploy button below.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1\u0026s=https://github.com/cosmicjs/next-merge\u0026env=COSMIC_BUCKET_SLUG,COSMIC_READ_KEY,COSMIC_PREVIEW_SECRET\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Cosmic\u0026envLink=https://vercel.link/cms-cosmic-env)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Fnext-merge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosmicjs%2Fnext-merge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosmicjs%2Fnext-merge/lists"}