diff --git a/examples/cms-contentful/.env.example b/examples/cms-contentful/.env.example new file mode 100644 index 0000000000000000000000000000000000000000..7719dc232ffa95368c391cfa7536c451483e1501 --- /dev/null +++ b/examples/cms-contentful/.env.example @@ -0,0 +1,4 @@ +NEXT_EXAMPLE_CMS_CONTENTFUL_SPACE_ID= +NEXT_EXAMPLE_CMS_CONTENTFUL_ACCESS_TOKEN= +NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_ACCESS_TOKEN= +NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_SECRET= \ No newline at end of file diff --git a/examples/cms-contentful/.gitignore b/examples/cms-contentful/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..5900fa96e8d3ebb02671081e382d857c9f29c307 --- /dev/null +++ b/examples/cms-contentful/.gitignore @@ -0,0 +1,2 @@ +.env +.now \ No newline at end of file diff --git a/examples/cms-contentful/README.md b/examples/cms-contentful/README.md new file mode 100644 index 0000000000000000000000000000000000000000..5f2df0a43f6fc6d689517d18a9e559ad31f7d353 --- /dev/null +++ b/examples/cms-contentful/README.md @@ -0,0 +1,158 @@ +# A statically generated blog example using Next.js and Contentful + +This example showcases Next.js's [Static Generation](/docs/basic-features/pages.md) feature using [Contentful](https://www.contentful.com/) as the data source. + +## Demo + +### [https://next-blog-contentful.now.sh/](https://next-blog-contentful.now.sh/) + +### Related examples + +- [Blog Starter](/examples/blog-starter) +- [DatoCMS](/examples/cms-datocms) +- [TakeShape](/examples/cms-takeshape) +- [Sanity](/examples/cms-sanity) + +## How to use + +Execute [`create-next-app`](https://github.com/zeit/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: + +```bash +npm init next-app --example cms-contentful cms-contentful-app +# or +yarn create next-app --example cms-contentful cms-contentful-app +``` + +## Configuration + +### Step 1. Create an account and a space on Contentful + +First, [create an account on Contentful](https://www.contentful.com/sign-up/). + +After creating an account, create a new **space** from the [dashboard](https://app.contentful.com/) and assign to it any name of your liking. + +### Step 2. Create an `author` content type + +From your contentful space, go to **Content model** and add a new content type: + +- **Api Identifier** should be `author` + +Once the content model is saved, let's add these fields (you don't have to modify the settings unless specified): + +- `name` - **Text** field. **Field ID** should be set to `name` +- `picture` - **Media** field. **Field ID** should be set to `picture` + +Save the content type and continue. + +### Step 3. Create a `post` type + +From your contentful space, go to **Content model** and add a new content type: + +- **Api Identifier** should be `post` + +Next, add these fields (you don't have to modify the settings unless specified): + +- `title` - **Text** field +- `content` - **Rich text** field +- `excerpt` - **Text** field. Enable **Long text, full-text search** +- `coverImage` - **Media** field +- `date` - **Date and time** field +- `slug` - **Text** field. You can optionally go to the settings of this field, and under **Appearance**, select **Slug** to display it as a slug of the `title` field. +- `author` - **Reference** field + +Save the content type and continue. + +### Step 4. Populate Content + +Go to the **Content** page in your space, then click on **Add entry** and select the **author** content type: + +- You just need **1 author entry**. +- Use dummy data for the text. +- For the image, you can download one from [Unsplash](https://unsplash.com/). + +Next, add a new entry to **post**: + +- We recommend creating at least **2 post entries**. +- 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 entry, you need to click on **Publish**. If not, the entry will be in draft state. + +### Step 5. Set up environment variables + +From your contentful space, go to **Settings > API keys**. There should be an example Content delivery / preview token - you can use this API key. (You may also create a new key.) + +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_CONTENTFUL_SPACE_ID` should be the **Space ID** field of your API Key +- `NEXT_EXAMPLE_CMS_CONTENTFUL_ACCESS_TOKEN` should be the **Content Delivery API - access token** field of your API key +- `NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_ACCESS_TOKEN` should be the **Content Preview API - access token** field of your API key +- `NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_SECRET` should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable preview mode + +Your `.env` file should look like this: + +```bash +NEXT_EXAMPLE_CMS_CONTENTFUL_SPACE_ID=... +NEXT_EXAMPLE_CMS_CONTENTFUL_ACCESS_TOKEN=... +NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_ACCESS_TOKEN=... +NEXT_EXAMPLE_CMS_CONTENTFUL_PREVIEW_SECRET=... +``` + +### Step 6. Run Next.js in development mode + +```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)! If it doesn't work, post on [GitHub discussions](https://github.com/zeit/next.js/discussions). + +### Step 7. Try preview mode + +On your contentful space, go to **Settings > Content preview**, then add a new content preview for development. + +The **Name** field may be anything, like `Development`. Then, under **Content preview URLs**, check **post** and set its value to: + +``` +http://localhost:3000/api/preview?secret=&slug={entry.fields.slug} +``` + +Replace `` with its respective value in `.env`. + +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. +- The state of the post will switch to **CHANGED** automatically. **Do not** publish it. By doing this, the post will be in draft state. +- In the sidebar, you should see the **Open preview** button. Click on it! + +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. + +### Step 8. Deploy on Vercel + +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)). + +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)). + +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 each variable with the corresponding strings in `.env`: + +```bash +now secrets add next_example_contentful_space_id +now secrets add next_example_cms_contentful_access_token +now secrets add next_example_cms_contentful_preview_access_token +now secrets add next_example_cms_contentful_preview_secret +``` + +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. diff --git a/examples/cms-contentful/components/alert.js b/examples/cms-contentful/components/alert.js new file mode 100644 index 0000000000000000000000000000000000000000..3530e66e59c8d3532a6323e73d4b7dc47f5bd322 --- /dev/null +++ b/examples/cms-contentful/components/alert.js @@ -0,0 +1,42 @@ +import Container from './container' +import cn from 'classnames' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Alert({ preview }) { + return ( +
+ +
+ {preview ? ( + <> + This is page is a preview.{' '} + + Click here + {' '} + to exit preview mode. + + ) : ( + <> + The source code for this blog is{' '} + + available on GitHub + + . + + )} +
+ +
+ ) +} diff --git a/examples/cms-contentful/components/avatar.js b/examples/cms-contentful/components/avatar.js new file mode 100644 index 0000000000000000000000000000000000000000..b0f2588908306ddc84e3f6db4392ec21caa921dc --- /dev/null +++ b/examples/cms-contentful/components/avatar.js @@ -0,0 +1,12 @@ +export default function Avatar({ name, picture }) { + return ( +
+ {name} +
{name}
+
+ ) +} diff --git a/examples/cms-contentful/components/container.js b/examples/cms-contentful/components/container.js new file mode 100644 index 0000000000000000000000000000000000000000..fc1c29dfb074756ec6f61d5506a452578abbbe85 --- /dev/null +++ b/examples/cms-contentful/components/container.js @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
{children}
+} diff --git a/examples/cms-contentful/components/cover-image.js b/examples/cms-contentful/components/cover-image.js new file mode 100644 index 0000000000000000000000000000000000000000..3263aaa0eed82d01a2efa6d4a6b3621caba35bdd --- /dev/null +++ b/examples/cms-contentful/components/cover-image.js @@ -0,0 +1,25 @@ +import cn from 'classnames' +import Link from 'next/link' + +export default function CoverImage({ title, url, slug }) { + const image = ( + {`Cover + ) + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ) +} diff --git a/examples/cms-contentful/components/date.js b/examples/cms-contentful/components/date.js new file mode 100644 index 0000000000000000000000000000000000000000..01025f8471cac96eb14d4441c59efd2d3dd12c80 --- /dev/null +++ b/examples/cms-contentful/components/date.js @@ -0,0 +1,7 @@ +import { format } from 'date-fns' + +export default ({ dateString }) => ( + +) diff --git a/examples/cms-contentful/components/footer.js b/examples/cms-contentful/components/footer.js new file mode 100644 index 0000000000000000000000000000000000000000..dbde8ff306efdbf26c9904d2ed039a2b5ba9521c --- /dev/null +++ b/examples/cms-contentful/components/footer.js @@ -0,0 +1,30 @@ +import Container from './container' +import { EXAMPLE_PATH } from '../lib/constants' + +export default function Footer() { + return ( + + ) +} diff --git a/examples/cms-contentful/components/header.js b/examples/cms-contentful/components/header.js new file mode 100644 index 0000000000000000000000000000000000000000..562e7e3eebb6a008611a99d8edd4dfea223cf69e --- /dev/null +++ b/examples/cms-contentful/components/header.js @@ -0,0 +1,12 @@ +import Link from 'next/link' + +export default function Header() { + return ( +

+ + Blog + + . +

+ ) +} diff --git a/examples/cms-contentful/components/hero-post.js b/examples/cms-contentful/components/hero-post.js new file mode 100644 index 0000000000000000000000000000000000000000..b973d523a604b7471b5d297203640cf973445f9d --- /dev/null +++ b/examples/cms-contentful/components/hero-post.js @@ -0,0 +1,37 @@ +import Link from 'next/link' +import Avatar from '../components/avatar' +import Date from '../components/date' +import CoverImage from '../components/cover-image' + +export default function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}) { + return ( +
+
+ +
+
+
+

+ + {title} + +

+
+ +
+
+
+

{excerpt}

+ {author && } +
+
+
+ ) +} diff --git a/examples/cms-contentful/components/intro.js b/examples/cms-contentful/components/intro.js new file mode 100644 index 0000000000000000000000000000000000000000..5931b3c5961bdbb45bcd606f77a54733c0455175 --- /dev/null +++ b/examples/cms-contentful/components/intro.js @@ -0,0 +1,28 @@ +import { CMS_NAME, CMS_URL } from '../lib/constants' + +export default function Intro() { + return ( +
+

+ Blog. +

+

+ A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +

+
+ ) +} diff --git a/examples/cms-contentful/components/layout.js b/examples/cms-contentful/components/layout.js new file mode 100644 index 0000000000000000000000000000000000000000..99d95353131e0fa4944d356d16984c124b4ab072 --- /dev/null +++ b/examples/cms-contentful/components/layout.js @@ -0,0 +1,16 @@ +import Alert from '../components/alert' +import Footer from '../components/footer' +import Meta from '../components/meta' + +export default function Layout({ preview, children }) { + return ( + <> + +
+ +
{children}
+
+