{"id":26722948,"url":"https://github.com/useallfive/prismic-next-test","last_synced_at":"2025-03-27T20:38:24.825Z","repository":{"id":42774942,"uuid":"273344912","full_name":"UseAllFive/prismic-next-test","owner":"UseAllFive","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T10:19:20.000Z","size":981,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"prod","last_synced_at":"2024-12-20T07:07:37.878Z","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/UseAllFive.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-06-18T21:37:24.000Z","updated_at":"2020-06-29T20:34:44.000Z","dependencies_parsed_at":"2023-02-05T21:01:59.451Z","dependency_job_id":null,"html_url":"https://github.com/UseAllFive/prismic-next-test","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/UseAllFive%2Fprismic-next-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fprismic-next-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fprismic-next-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseAllFive%2Fprismic-next-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UseAllFive","download_url":"https://codeload.github.com/UseAllFive/prismic-next-test/tar.gz/refs/heads/prod","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245923364,"owners_count":20694713,"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-27T20:38:24.108Z","updated_at":"2025-03-27T20:38:24.800Z","avatar_url":"https://github.com/UseAllFive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A statically generated blog example using Next.js and Prismic\n\nThis example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Prismic](https://prismic.io/) as the data source.\n\n## Demo\n\n### [https://next-blog-prismic.now.sh/](https://next-blog-prismic.now.sh/)\n\n## Deploy your own\n\nOnce you have access to [the environment variables you'll need](#step-5-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/vercel/next.js/tree/canary/examples/cms-prismic\u0026env=PRISMIC_API_TOKEN,PRISMIC_REPOSITORY_NAME\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Prismic\u0026envLink=https://vercel.link/cms-prismic-env)\n\n### Related examples\n\n- [WordPress](/examples/cms-wordpress)\n- [DatoCMS](/examples/cms-datocms)\n- [Sanity](/examples/cms-sanity)\n- [TakeShape](/examples/cms-takeshape)\n- [Contentful](/examples/cms-contentful)\n- [Strapi](/examples/cms-strapi)\n- [Agility CMS](/examples/cms-agilitycms)\n- [Cosmic](/examples/cms-cosmic)\n- [ButterCMS](/examples/cms-buttercms)\n- [Storyblok](/examples/cms-storyblok)\n- [Blog Starter](/examples/blog-starter)\n\n## How to use\n\n### Using `create-next-app`\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) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example cms-prismic cms-prismic-app\n# or\nyarn create next-app --example cms-prismic cms-prismic-app\n```\n\n### Download manually\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-prismic\ncd cms-prismic\n```\n\n## Configuration\n\n### Step 1. Create an account and a repository on Prismic\n\nFirst, [create an account on Prismic](https://prismic.io/).\n\nAfter creating an account, create a **repository** from the [dashboard](https://prismic.io/dashboard/) and assign to it any name of your liking.\n\n### Step 2. Create an `author` type\n\nFrom the repository page, create a new **custom type**:\n\n- The name should be `author`.\n\nNext, add these fields (you don't have to modify the settings):\n\n- `name` - **Key Text** field\n- `picture` - **Image** field\n\nAlternatively, you can copy the JSON in [`types/author.json`](types/author.json), then click on **JSON editor** and paste it there.\n\nSave the type and continue.\n\n### Step 3. Create a `post` type\n\nFrom the repository page, create a new **custom type**:\n\n- The name should be `post`.\n\nNext, add these fields (you don't have to modify the settings unless specified):\n\n- `title` - **Title** field\n- `content` - **Rich Text** field\n- `excerpt` - **Key Text** field\n- `coverimage` - **Image** field\n- `date` - **Date** field\n- `author` - **Content relationship** field, you may also add `author` to the **Constraint to custom type** option to only accept documents from the `author` type.\n- `slug` - **UID** field.\n\nAlternatively, you can copy the JSON in [`types/post.json`](types/post.json), then click on **JSON editor** and paste it there.\n\nSave the type and continue.\n\n### Step 4. Populate Content\n\nGo to the **Content** page, it's in the menu at the top left, then click on **Create new** and select the **author** type:\n\n- You just need **1 author document**.\n- Use dummy data for the text.\n- For the image, you can download one from [Unsplash](https://unsplash.com/).\n\nNext, select **Post** and create a new document.\n\n- We recommend creating at least **2 Post documents**.\n- Use dummy data for the text.\n- You can write markdown for the **content** field.\n- For images, you can download them from [Unsplash](https://unsplash.com/).\n- Pick the **author** you created earlier.\n\n**Important:** For each document, you need to click **Publish** after saving. If not, the document will be in the draft state.\n\n### Step 5. Set up environment variables\n\nFollow the instructions in [this post](https://intercom.help/prismicio/en/articles/1036153-generating-an-access-token) to generate a new access token.\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- `PRISMIC_API_TOKEN` should be the **Permanent access token** you just created\n- `PRISMIC_REPOSITORY_NAME` is the name of your repository (the one in the URL)\n- `PRISMIC_REPOSITORY_LOCALE` is the locale of your repository. Defaults to `en-us`\n\nYour `.env.local` file should look like this:\n\n```bash\nPRISMIC_API_TOKEN=...\nPRISMIC_REPOSITORY_NAME=...\nPRISMIC_REPOSITORY_LOCALE=...\n```\n\nMake sure the locale matches your settings in the Prismic dashboard.\n\n### Step 6. 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 7. Try preview mode\n\nOn your repository page, go to **Settings**, click on **Previews** and then **Create a New Preview** for development, fill the form like so:\n\n- **Site Name**: may be anything, like `development`\n- **Domain of Your Application**: `http://localhost:3000`\n- **Link Resolver**: `/api/preview`\n\nOnce saved, go to one of the posts you've created and:\n\n- **Update the title**. For example, you can add `[Draft]` in front of the title.\n- Click **Save**, but **DO NOT** click **Publish**. By doing this, the post will be in draft state.\n- Right next to the **Publish** button you should see the **Preview** button, displayed with an eye icon. Click on it!\n\nYou should now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page.\n\n### Step 8. 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-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-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 our 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/vercel/next.js/tree/canary/examples/cms-prismic\u0026env=PRISMIC_API_TOKEN,PRISMIC_REPOSITORY_NAME\u0026envDescription=Required%20to%20connect%20the%20app%20with%20Prismic\u0026envLink=https://vercel.link/cms-prismic-env)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseallfive%2Fprismic-next-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseallfive%2Fprismic-next-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseallfive%2Fprismic-next-test/lists"}