# A statically generated blog example using Next.js and Strapi
This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Strapi](https://strapi.io/) as the data source.
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:
From **Content-Types Builder**, **create a new collection type**.
- The display name should be `Author`.
Next, add these fields (you don't have to modify the settings):
- **Text** field called **`name`** (**Short text**)
- **Media** field called **`picture`** (**Single media**)
Then click **Save**.
### Step 4. Create a `Post` collection
From **Content-Types Builder**, **create a new collection type**.
- The display name should be `Post`.
Next, add these fields (you don't have to modify the settings unless specified):
- **Text** field called **`title`** (**Short text**)
- **Rich Text** field called **`content`** (**Multiple-paragraph Text**)
- **Text** field called **`excerpt`** (**Long text**)
- **Media** field called **`coverImage`** (**Single media**)
- **Date** field called **`date`** (type should be **date**)
- **UID** field called **`slug`** (attached field should be **title**)
- **Relation** field called **`author`** (Post **has one** Author)
- **Enumeration** field `status` (the values should be **published** and **draft**)
### Step 5. Set permissions
From **Roles & Permissions**, edit the **Public** role.
Then select: `count`, `find`, and `findone` permissions for both **Author** and **Post**. Click **Save**.
### Step 6. Populate Content
Select **Author** and click **Add New Author**.
- You just need **1 Author entry**.
- Use dummy data for the name.
- For the image, you can download one from [Unsplash](https://unsplash.com/).
Next, select **Posts** and click **Add New Post**.
- We recommend creating at least **2 Post records**.
- Use dummy data for the text.
- You can write markdown for the **content** field.
- For the images, you can download ones from [Unsplash](https://unsplash.com/).
- Pick the **Author** you created earlier.
- Set the **status** field to be **published**.
### Step 7. Set up environment variables
While the Strapi server is running, open a new terminal and `cd` into the Next.js app directory you created earlier.
```
cd cms-strapi-app
```
Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
```bash
cp .env.local.example .env.local
```
Then set each variable on `.env.local`:
-`NEXT_EXAMPLE_CMS_STRAPI_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
-`NEXT_PUBLIC_API_URL` should be set as `http://localhost:1337` (no trailing slash).
### Step 8. Run Next.js in development mode
Make sure that the local Strapi server is still running at http://localhost:1337. Inside the Next.js app directory, run:
```bash
npm install
npm run dev
# or
yarn install
yarn dev
```
Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! You should see the two posts you’ve created. If it doesn't work, make sure that:
- You’ve installed GraphQL to Strapi on Step 2.
- You’ve set the Roles & Permissions in Step 5.
- You’ve set the `status` of each post to be `published` in Step 6.
The best place to debug is inside the `fetchAPI` function in `lib/api.js`. If you still need help, you can post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
### Step 9. Try preview mode
To try preview mode, create another post like before, but:
- Set the **title** as `Draft Post Test`
- Set the **status** as `draft`.
Now, if you go to the post page on localhost, you won't see this post because it’s not published. However, if you use the **Preview Mode**, you'll be able to see the change ([Documentation](https://nextjs.org/docs/advanced-features/preview-mode)).
-`<secret>` should be the string you entered for `NEXT_EXAMPLE_CMS_STRAPI_PREVIEW_SECRET`.
-`<slug>` should be the post's `slug` attribute.
You should now be able to see the draft post. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
### Step 10. Deploy Strapi
To deploy to production, you must first deploy your Strapi app. The Strapi app for our demo at https://next-blog-strapi.now.sh/ is deployed to Heroku ([here’s the documentation](https://strapi.io/documentation/v3.x/deployment/heroku.html)) and uses Cloudinary for image hosting ([see this file](https://github.com/strapi/strapi-starter-next-blog/blob/master/backend/extensions/upload/config/settings.js)).
### Step 11. Deploy on Vercel
After deploying Strapi, you can deploy this Next.js 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)).
To deploy on Vercel, you need to set the environment variables with **Vercel Secrets** using [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/vercel-cli#commands/secrets)).
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_PUBLIC_API_URL>` and `<NEXT_EXAMPLE_CMS_STRAPI_PREVIEW_SECRET>` with the corresponding strings in `.env`.
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.
