{"id":26763869,"url":"https://github.com/cwefso/next-sanity-blog","last_synced_at":"2025-06-29T07:35:49.653Z","repository":{"id":274861817,"uuid":"924304626","full_name":"cwefso/next-sanity-blog","owner":"cwefso","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-29T19:46:52.000Z","size":246,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T20:28:25.485Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/cwefso.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":"2025-01-29T19:10:02.000Z","updated_at":"2025-01-29T19:46:55.000Z","dependencies_parsed_at":"2025-01-29T20:29:10.500Z","dependency_job_id":"158c3c57-ac4d-4ec0-bcb3-b7eec6b6a4ce","html_url":"https://github.com/cwefso/next-sanity-blog","commit_stats":null,"previous_names":["cwefso/next-sanity-blog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwefso%2Fnext-sanity-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwefso%2Fnext-sanity-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwefso%2Fnext-sanity-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwefso%2Fnext-sanity-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cwefso","download_url":"https://codeload.github.com/cwefso/next-sanity-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246089114,"owners_count":20721819,"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":"2025-03-28T19:35:17.468Z","updated_at":"2025-03-28T19:35:18.111Z","avatar_url":"https://github.com/cwefso.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A statically generated blog example using Next.js and Sanity\n\n![Screenshot of Sanity Studio using Presentation Tool to do Visual Editing](https://github.com/sanity-io/next.js/assets/81981/59ecd9d6-7a78-41c6-95f7-275f66fe3c9d)\n\nThis starter is a statically generated blog that uses Next.js App Router for the frontend and [Sanity][sanity-homepage] to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration and visual editing with live updates using [Presentation][presentation].\n\nThe Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a blog or learn these technologies.\n\n## Features\n\n- A performant, static blog with editable posts, authors, and site settings\n- TypeScript setup with [Sanity TypeGen](https://www.sanity.io/docs/sanity-typegen)\n- A native and customizable authoring environment, accessible on `yourblog.com/studio`\n- Real-time and collaborative content editing with fine-grained revision history\n- Side-by-side instant content preview that works across your whole site\n- Support for block content and the most advanced custom fields capability in the industry\n- Incremental Static Revalidation; no need to wait for a rebuild to publish new content\n- Unsplash integration setup for easy media management\n- [Sanity AI Assist preconfigured for image alt text generation](https://www.sanity.io/docs/ai-assist?utm_source=github.com\u0026utm_medium=organic_social\u0026utm_campaign=ai-assist\u0026utm_content=)\n- Out of the box support for [Vercel Visual Editing](https://www.sanity.io/blog/visual-editing-sanity-vercel?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=may-vercel-launch).\n\n## Demo\n\n### [https://next-blog.sanity.build](https://next-blog.sanity.build)\n\n## Deploy your own\n\nUse the Deploy Button below, you'll deploy the example using [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) as well as connect it to your Sanity dataset using [the Sanity Vercel Integration][integration].\n\n[![Deploy with Vercel](https://vercel.com/button)][vercel-deploy]\n\n## How to use\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:\n\n```bash\nnpx create-next-app --example cms-sanity next-sanity-blog\n```\n\n```bash\nyarn create next-app --example cms-sanity next-sanity-blog\n```\n\n```bash\npnpm create next-app --example cms-sanity next-sanity-blog\n```\n\nWhenever you edit a GROQ query you update the TypeScript types by running:\n\n```bash\nnpm run typegen\n```\n\n# Configuration\n\n- [Step 1. Set up the environment](#step-1-set-up-the-environment)\n  - [Reuse remote environment variables](#reuse-remote-environment-variables)\n  - [Using the Sanity CLI](#using-the-sanity-cli)\n    - [Creating a read token](#creating-a-read-token)\n- [Step 2. Run Next.js locally in development mode](#step-2-run-nextjs-locally-in-development-mode)\n- [Step 3. Populate content](#step-3-populate-content)\n- [Step 4. Deploy to production](#step-4-deploy-to-production)\n- [Next steps](#next-steps)\n\n## Step 1. Set up the environment\n\n### Reuse remote environment variables\n\nIf you started with [deploying your own](#deploy-your-own) then you can run this to reuse the environment variables from the Vercel project and skip to the next step:\n\n```bash\nnpx vercel link\nnpx vercel env pull\n```\n\n### Using the Sanity CLI\n\nCopy the `.env.local.example` file to `.env.local` to get started:\n\n```bash\ncp -i .env.local.example .env.local\n```\n\nRun the setup command to get setup with a Sanity project, dataset and their relevant environment variables:\n\n```bash\nnpm run setup\n```\n\n```bash\nyarn setup\n```\n\n```bash\npnpm run setup\n```\n\nYou'll be asked multiple questions, here's a sample output of what you can expect:\n\n```bash\nNeed to install the following packages:\nsanity@3.30.1\nOk to proceed? (y) y\nYou're setting up a new project!\nWe'll make sure you have an account with Sanity.io.\nPress ctrl + C at any time to quit.\n\nPrefer web interfaces to terminals?\nYou can also set up best practice Sanity projects with\nyour favorite frontends on https://www.sanity.io/templates\n\nLooks like you already have a Sanity-account. Sweet!\n\n✔ Fetching existing projects\n? Select project to use Templates [r0z1eifg]\n? Select dataset to use blog-vercel\n? Would you like to add configuration files for a Sanity project in this Next.js folder? No\n\nDetected framework Next.js, using prefix 'NEXT_PUBLIC_'\nFound existing NEXT_PUBLIC_SANITY_PROJECT_ID, replacing value.\nFound existing NEXT_PUBLIC_SANITY_DATASET, replacing value.\n```\n\nIt's important that when you're asked `Would you like to add configuration files for a Sanity project in this Next.js folder?` that you answer `No` as this example is already setup with the required configuration files.\n\n#### Creating a read token\n\nThis far your `.env.local` file should have values for `NEXT_PUBLIC_SANITY_PROJECT_ID` and `NEXT_PUBLIC_SANITY_DATASET`.\nBefore you can run the project you need to setup a read token (`SANITY_API_READ_TOKEN`), it's used for authentication when Sanity Studio is live previewing your application.\n\n1. Go to [manage.sanity.io](https://manage.sanity.io/) and select your project.\n2. Click on the `🔌 API` tab.\n3. Click on `+ Add API token`.\n4. Name it \"next blog live preview read token\" and set `Permissions` to `Viewer` and hit `Save`.\n5. Copy the token and add it to your `.env.local` file.\n\n```bash\nSANITY_API_READ_TOKEN=\"\u003cpaste your token here\u003e\"\n```\n\nYour `.env.local` file should look something like this:\n\n```bash\nNEXT_PUBLIC_SANITY_PROJECT_ID=\"r0z1eifg\"\nNEXT_PUBLIC_SANITY_DATASET=\"blog-vercel\"\nSANITY_API_READ_TOKEN=\"sk...\"\n```\n\n\u003e [!CAUTION]  \n\u003e Make sure to add `.env.local` to your `.gitignore` file so you don't accidentally commit it to your repository.\n\n## Step 2. Run Next.js locally in development mode\n\n```bash\nnpm install \u0026\u0026 npm run dev\n```\n\n```bash\nyarn install \u0026\u0026 yarn dev\n```\n\n```bash\npnpm install \u0026\u0026 pnpm 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 3. Populate content\n\nOpen your Sanity Studio that should be running on [http://localhost:3000/studio](http://localhost:3000/studio).\n\nBy default you're taken to the [Presentation tool][presentation], which has a preview of the blog on the left hand side, and a list of documents on the right hand side.\n\n\u003cdetails\u003e\n\u003csummary\u003eView screenshot ✨\u003c/summary\u003e\n\n![screenshot](https://github.com/vercel/next.js/assets/81981/07cbc580-4a03-4837-9aa4-90b632c95630)\n\n\u003c/details\u003e\n\nWe're all set to do some content creation!\n\n- Click on the **\"+ Create\"** button top left and select **Post**\n- Type some dummy data for the **Title**\n- **Generate** a **Slug**\n  \u003cdetails\u003e\n  \u003csummary\u003eNow that you have a slug you should see the post show up in the preview on the left hand side ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/05b74848-6ae4-442b-8995-0b7e2180aa74)\n\n  \u003c/details\u003e\n\n- Fill in **Content** with some dummy text\n  \u003cdetails\u003e\n  \u003csummary\u003eOr generate it with AI Assist ✨\u003c/summary\u003e\n\n  If you've enabled [AI Assist][enable-ai-assist] you click on the sparkles ✨ button and generate a draft based on your title and then on **Generate sample content**.\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/2276d8ad-5b55-447c-befe-d53249f091e1)\n\n  \u003c/details\u003e\n\n- Summarize the **Content** in the **Excerpt** field\n  \u003cdetails\u003e\n  \u003csummary\u003eOr have AI Assist summarize it for you ✨\u003c/summary\u003e\n\n  If you've enabled [AI Assist][enable-ai-assist] you click on the sparkles ✨ button and then on **Generate sample content**.\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/d24b9b37-cd88-4519-8094-f4c956102450)\n\n  \u003c/details\u003e\n\n- Select a **Cover Image** from [Unsplash].\n  \u003cdetails\u003e\n  \u003csummary\u003eUnsplash is available in the **Select** dropdown ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/204d004d-9396-434e-8795-a8b68a2ed89b)\n\n  \u003c/details\u003e\n  \u003cdetails\u003e\n  \u003csummary\u003eClick the \"Crop image\" button to adjust hotspots and cropping ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/e905fc6e-5bab-46a7-baec-7cb08747772c)\n\n  \u003c/details\u003e\n  \u003cdetails\u003e\n  \u003csummary\u003eYou can preview the results live on the left side, and additional formats on the right side ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/6c59eef0-d2d9-4d77-928a-98e99df4b1df)\n\n  \u003c/details\u003e\n\n- Customize the blog name, description and more.\n  \u003cdetails\u003e\n  \u003csummary\u003eClick \"Structure\" at the top center, then on \"Settings\" on the left hand side ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/14f48d83-af81-4589-900e-a7a598cc608a)\n\n  \u003c/details\u003e\n  \u003cdetails\u003e\n  \u003csummary\u003eOnce you have a \"Settings\" document, you can customize it inside \"Presentation\" ✨\u003c/summary\u003e\n\n  ![screenshot](https://github.com/vercel/next.js/assets/81981/e3473f7b-5e7e-46ab-8d43-cae54a4b929b)\n\n  \u003c/details\u003e\n\n\u003e [!IMPORTANT]  \n\u003e For each post record, you need to click **Publish** after saving for it to be visible outside Draft Mode. In production new content is using [Time-based Revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#time-based-revalidation), which means it may take up to 1 minute before changes show up. Since a stale-while-revalidate pattern is used you may need to refresh a couple of times to see the changes.\n\n## Step 4. Deploy to production\n\n\u003e [!NOTE]  \n\u003e If you already [deployed with Vercel earlier](#deploy-your-own) you can skip this step.\n\nTo deploy your local project to Vercel, push it to [GitHub](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github)/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example).\n\n\u003e [!IMPORTANT]  \n\u003e When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n\nAfter it's deployed link your local code to the Vercel project:\n\n```bash\nnpx vercel link\n```\n\n\u003e [!TIP]\n\u003e In production you can exit Draft Mode by clicking on _\"Back to published\"_ at the top. On [Preview deployments](https://vercel.com/docs/deployments/preview-deployments) you can [toggle Draft Mode in the Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/draft-mode#enabling-draft-mode-in-the-vercel-toolbar).\n\n## Next steps\n\n- [Join the Sanity community](https://slack.sanity.io/)\n\n## Related examples\n\n- [AgilityCMS](/examples/cms-agilitycms)\n- [Builder.io](/examples/cms-builder-io)\n- [ButterCMS](/examples/cms-buttercms)\n- [Contentful](/examples/cms-contentful)\n- [Cosmic](/examples/cms-cosmic)\n- [DatoCMS](/examples/cms-datocms)\n- [DotCMS](/examples/cms-dotcms)\n- [Drupal](/examples/cms-drupal)\n- [Enterspeed](/examples/cms-enterspeed)\n- [Ghost](/examples/cms-ghost)\n- [GraphCMS](/examples/cms-graphcms)\n- [Kontent.ai](/examples/cms-kontent-ai)\n- [MakeSwift](/examples/cms-makeswift)\n- [Payload](/examples/cms-payload)\n- [Plasmic](/examples/cms-plasmic)\n- [Prepr](/examples/cms-prepr)\n- [Prismic](/examples/cms-prismic)\n- [Sanity](/examples/cms-sanity)\n- [Sitecore XM Cloud](/examples/cms-sitecore-xmcloud)\n- [Sitefinity](/examples/cms-sitefinity)\n- [Storyblok](/examples/cms-storyblok)\n- [TakeShape](/examples/cms-takeshape)\n- [Tina](/examples/cms-tina)\n- [Umbraco](/examples/cms-umbraco)\n- [Umbraco heartcore](/examples/cms-umbraco-heartcore)\n- [Webiny](/examples/cms-webiny)\n- [WordPress](/examples/cms-wordpress)\n- [Blog Starter](/examples/blog-starter)\n\n[vercel-deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sanity\u0026repository-name=cms-sanity\u0026project-name=cms-sanity\u0026demo-title=Blog%20using%20Next.js%20%26%20Sanity\u0026demo-description=Real-time%20updates%2C%20seamless%20editing%2C%20no%20rebuild%20delays.\u0026demo-url=https%3A%2F%2Fnext-blog.sanity.build%2F\u0026demo-image=https%3A%2F%2Fgithub.com%2Fsanity-io%2Fnext-sanity%2Fassets%2F81981%2Fb81296a9-1f53-4eec-8948-3cb51aca1259\u0026integration-ids=oac_hb2LITYajhRQ0i4QznmKH7gx\n[integration]: https://www.sanity.io/docs/vercel-integration\n[`.env.local.example`]: .env.local.example\n[unsplash]: https://unsplash.com\n[sanity-homepage]: https://www.sanity.io?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=nextjs-v3vercelstarter\n[presentation]: https://www.sanity.io/docs/presentation\n[enable-ai-assist]: https://www.sanity.io/plugins/ai-assist#enabling-the-ai-assist-api\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwefso%2Fnext-sanity-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcwefso%2Fnext-sanity-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwefso%2Fnext-sanity-blog/lists"}