2020-04-10 12:41:09 +02:00
# A statically generated blog example using Next.js and Prismic
2020-06-06 02:23:20 +02:00
This example showcases Next.js's [Static Generation ](https://nextjs.org/docs/basic-features/pages ) feature using [Prismic ](https://prismic.io/ ) as the data source.
2020-04-10 12:41:09 +02:00
## Demo
2021-04-14 16:46:06 +02:00
### [https://next-blog-prismic.vercel.app/](https://next-blog-prismic.vercel.app/)
2020-04-10 12:41:09 +02:00
2020-06-12 01:44:23 +02:00
## Deploy your own
Once 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&utm_medium=readme&utm_campaign=next-example ):
2021-01-07 02:40:29 +01:00
[![Deploy with Vercel ](https://vercel.com/button )](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prismic& project-name=cms-prismic& repository-name=cms-prismic& env=PRISMIC_API_TOKEN,PRISMIC_REPOSITORY_NAME& envDescription=Required%20to%20connect%20the%20app%20with%20Prismic& envLink=https://vercel.link/cms-prismic-env)
2020-06-12 01:44:23 +02:00
2020-04-10 12:41:09 +02:00
### Related examples
2020-06-02 00:17:20 +02:00
- [WordPress ](/examples/cms-wordpress )
2020-04-10 12:41:09 +02:00
- [DatoCMS ](/examples/cms-datocms )
- [Sanity ](/examples/cms-sanity )
2020-06-02 00:17:20 +02:00
- [TakeShape ](/examples/cms-takeshape )
2020-05-12 21:15:53 +02:00
- [Contentful ](/examples/cms-contentful )
2020-06-02 01:49:43 +02:00
- [Strapi ](/examples/cms-strapi )
2020-06-02 19:36:12 +02:00
- [Agility CMS ](/examples/cms-agilitycms )
2020-06-04 22:18:11 +02:00
- [Cosmic ](/examples/cms-cosmic )
2020-06-10 19:13:10 +02:00
- [ButterCMS ](/examples/cms-buttercms )
2020-06-11 00:23:28 +02:00
- [Storyblok ](/examples/cms-storyblok )
2020-08-25 00:58:53 +02:00
- [Kontent ](/examples/cms-kontent )
2021-02-07 19:27:47 +01:00
- [Ghost ](/examples/cms-ghost )
2021-12-07 16:38:55 +01:00
- [Umbraco Heartcore ](/examples/cms-umbraco-heartcore )
2020-06-02 00:17:20 +02:00
- [Blog Starter ](/examples/blog-starter )
2022-01-12 22:58:43 +01:00
- [Builder.io ](/examples/cms-builder-io )
2022-10-01 15:26:13 +02:00
- [DotCMS ](/examples/cms-dotcms )
2022-09-30 01:48:00 +02:00
- [Enterspeed ](/examples/cms-enterspeed )
2020-04-10 12:41:09 +02:00
## How to use
2022-05-27 21:46:38 +02:00
Execute [`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:
2020-04-10 12:41:09 +02:00
```bash
2020-06-01 19:36:57 +02:00
npx create-next-app --example cms-prismic cms-prismic-app
2022-07-27 04:57:48 +02:00
```
```bash
2020-04-10 12:41:09 +02:00
yarn create next-app --example cms-prismic cms-prismic-app
2022-07-27 04:57:48 +02:00
```
```bash
2022-05-27 23:21:40 +02:00
pnpm create next-app --example cms-prismic cms-prismic-app
2020-04-10 12:41:09 +02:00
```
## Configuration
2022-10-01 06:06:49 +02:00
### Step 1. Create an account and repository on Prismic
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
First, create a Prismic account and repository with the following command:
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
```sh
npx @slicemachine/init
```
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
This command will:
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
1. Ask you to log in to Prismic or create an account.
2. Create a new Prismic repository with premade Author and Post content models.
3. Connect the Prismic repository to your app.
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
**Optional**: To see the premade content models, start the [Slice Machine ](https://prismic.io/docs/technologies/slice-machine ) app.
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
```sh
npm run slicemachine
```
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
Slice Machine should be available on < http: / / localhost:9999 > once started.
2020-04-16 16:15:43 +02:00
2022-10-01 06:06:49 +02:00
### Step 2. Populate Content
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
Go to the [Prismic dashboard ](https://prismic.io/dashboard ) and select your Prismic repository.
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
Once in, click on **Create new** and select the **Author** type:
2020-04-10 12:41:09 +02:00
- You just need **1 author document** .
- Use dummy data for the text.
- For the image, you can download one from [Unsplash ](https://unsplash.com/ ).
2022-10-01 06:06:49 +02:00
Save and publish the document.
Next, go back to the documents list, click on **Create new** and select the **Post** type:
2020-04-10 12:41:09 +02:00
- We recommend creating at least **2 Post documents** .
- Use dummy data for the text.
2022-10-01 06:06:49 +02:00
- You can use the Text and Image Slices to create content.
2020-04-10 12:41:09 +02:00
- For images, you can download them from [Unsplash ](https://unsplash.com/ ).
- Pick the **author** you created earlier.
**Important:** For each document, you need to click **Publish** after saving. If not, the document will be in the draft state.
2022-10-01 06:06:49 +02:00
### Step 3. Run Next.js in development mode
2020-04-10 12:41:09 +02:00
```bash
npm run dev
# or
yarn dev
```
2020-05-27 23:51:11 +02:00
Your 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 ).
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
### Step 4. Try preview mode
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
On your repository page, go to **Settings** , click on **Previews** , and then **Create a New Preview** . Fill the form like so for development previews:
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
- **Site Name**: may be anything, like "Development"
2020-04-10 12:41:09 +02:00
- **Domain of Your Application**: `http://localhost:3000`
- **Link Resolver**: `/api/preview`
2022-10-01 06:06:49 +02:00
Once saved, go to one of the posts you created and:
2020-04-10 12:41:09 +02:00
- **Update the title**. For example, you can add `[Draft]` in front of the title.
- Click **Save** , but **DO NOT** click **Publish** . By doing this, the post will be in draft state.
2022-10-01 06:06:49 +02:00
- Right next to the **Publish** button, you should see the **Preview** button, displayed with an eye icon. Click on it!
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
You should now be able to see the updated title. To exit preview mode, click on the "x" icon in the purple Prismic toolbar in the bottom left corner of the page.
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
### Step 5. Deploy on Vercel
2020-04-10 12:41:09 +02:00
2020-06-12 01:44:23 +02:00
You can deploy this app to the cloud with [Vercel ](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example ) ([Documentation](https://nextjs.org/docs/deployment)).
2020-04-10 12:41:09 +02:00
2020-06-12 01:44:23 +02:00
#### Deploy Your Local Project
2020-04-10 12:41:09 +02:00
2021-01-07 02:40:29 +01:00
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel ](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example ).
2020-04-10 12:41:09 +02:00
2020-06-12 01:44:23 +02:00
#### Deploy from Our Template
Alternatively, you can deploy using our template by clicking on the Deploy button below.
2020-04-10 12:41:09 +02:00
2022-10-01 06:06:49 +02:00
[![Deploy with Vercel ](https://vercel.com/button )](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prismic& project-name=cms-prismic)