2020-04-10 12:41:09 +02:00
# A statically generated blog example using Next.js and Prismic
This example showcases Next.js's [Static Generation ](/docs/basic-features/pages.md ) feature using [Prismic ](https://prismic.io/ ) as the data source.
## Demo
### [https://next-blog-prismic.now.sh/](https://next-blog-prismic.now.sh/)
### 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-02 00:17:20 +02:00
- [Blog Starter ](/examples/blog-starter )
2020-04-10 12:41:09 +02:00
## How to use
### Using `create-next-app`
2020-05-27 23:51:11 +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 ) or [Yarn ](https://yarnpkg.com/lang/en/docs/cli/create/ ) 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
2020-04-10 12:41:09 +02:00
# or
yarn create next-app --example cms-prismic cms-prismic-app
```
### Download manually
Download the example:
```bash
2020-05-27 20:11:39 +02:00
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/cms-prismic
2020-04-10 12:41:09 +02:00
cd cms-prismic
```
## Configuration
### Step 1. Create an account and a repository on Prismic
First, [create an account on Prismic ](https://prismic.io/ ).
After creating an account, create a **repository** from the [dashboard ](https://prismic.io/dashboard/ ) and assign to it any name of your liking.
### Step 2. Create an `author` type
From the repository page, create a new **custom type** :
- The name should be `author` .
Next, add these fields (you don't have to modify the settings):
- `name` - **Key Text** field
- `picture` - **Image** field
2020-04-16 16:15:43 +02:00
Alternatively, you can copy the JSON in [`types/author.json` ](types/author.json ), then click on **JSON editor** and paste it there.
2020-04-10 12:41:09 +02:00
Save the type and continue.
### Step 3. Create a `post` type
From the repository page, create a new **custom type** :
- The name should be `post` .
Next, add these fields (you don't have to modify the settings unless specified):
- `title` - **Title** field
- `content` - **Rich Text** field
- `excerpt` - **Key Text** field
- `coverimage` - **Image** field
- `date` - **Date** field
- `author` - **Content relationship** field, you may also add `author` to the **Constraint to custom type** option to only accept documents from the `author` type.
- `slug` - **UID** field.
2020-04-16 16:15:43 +02:00
Alternatively, you can copy the JSON in [`types/post.json` ](types/post.json ), then click on **JSON editor** and paste it there.
2020-04-10 12:41:09 +02:00
Save the type and continue.
### Step 4. Populate Content
Go to the **Content** page, it's in the menu at the top left, then click on **Create new** and select the **author** type:
- You just need **1 author document** .
- Use dummy data for the text.
- For the image, you can download one from [Unsplash ](https://unsplash.com/ ).
Next, select **Post** and create a new document.
- We recommend creating at least **2 Post documents** .
- Use dummy data for the text.
- You can write markdown for the **content** field.
- 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.
### Step 5. Set up environment variables
Follow the instructions in [this post ](https://intercom.help/prismicio/en/articles/1036153-generating-an-access-token ) to generate a new access token.
Next, copy the `.env.example` file in this directory to `.env` (which will be ignored by Git):
```bash
cp .env.example .env
```
Then set each variable on `.env` :
- `NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN` should be the **Permanent access token** you just created
- `NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME` is the name of your repository (the one in the URL)
2020-05-06 20:30:23 +02:00
- `NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_LOCALE` is the locale of your repository. Defaults to `en-us`
2020-04-10 12:41:09 +02:00
Your `.env` file should look like this:
```bash
NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN=...
NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME=...
2020-05-06 20:30:23 +02:00
NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_LOCALE=...
2020-04-10 12:41:09 +02:00
```
2020-05-18 19:10:32 +02:00
Make sure the locale matches your settings in the Prismic dashboard.
2020-04-10 12:41:09 +02:00
### Step 6. Run Next.js in development mode
```bash
npm install
npm run dev
# or
yarn install
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
### Step 7. Try preview mode
On your repository page, go to **Settings** , click on **Previews** and then **Create a New Preview** for development, fill the form like so:
- **Site Name**: may be anything, like `development`
- **Domain of Your Application**: `http://localhost:3000`
- **Link Resolver**: `/api/preview`
Once saved, go to one of the posts you've created and:
- **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.
- Right next to the **Publish** button you should see the **Preview** button, displayed with an eye icon. Click on it!
2020-04-29 20:19:49 +02:00
You 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.
2020-04-10 12:41:09 +02:00
2020-04-21 11:47:12 +02:00
### Step 8. Deploy on Vercel
2020-04-10 12:41:09 +02:00
2020-04-21 11:47:12 +02:00
You can deploy this app to the cloud with [Vercel ](https://vercel.com/import?filter=next.js&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-04-29 20:19:49 +02:00
To deploy on Vercel, you need to set the environment variables with **Now Secrets** using [Vercel CLI ](https://vercel.com/download ) ([Documentation](https://vercel.com/docs/now-cli#commands/secrets)).
2020-04-10 12:41:09 +02:00
2020-04-29 20:19:49 +02:00
Install [Vercel CLI ](https://vercel.com/download ), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `<NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN>` and `<NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME>` with the corresponding strings in `.env` :
2020-04-10 12:41:09 +02:00
```bash
now secrets add next_example_cms_prismic_api_token < NEXT_EXAMPLE_CMS_PRISMIC_API_TOKEN >
now secrets add next_example_cms_prismic_repository_name < NEXT_EXAMPLE_CMS_PRISMIC_REPOSITORY_NAME >
```
2020-04-21 11:47:12 +02:00
Then push the project to GitHub/GitLab/Bitbucket and [import to Vercel ](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example ) to deploy.