A simple Next.js site powered by Contentful and ready for deployment on Vercel
- Get a free account on Contentful.
- Go to Content Model and add a Content Type called Post.
- On your Post, define the attributes. Define all as Short Text and name then as follows:
- Title
- Date
- Img
- Alt
- URL
- Go to Content and Add Post
- Add a post with whatever info you want Img must be the URL of an image, and URL is a link to an external page. Example:
- Title: My Beautiful Cat
- Date: June 11, 2054
- Img: http://theurltotheactualimageofmycat.com/image.png
- Alt: This is beautiful a cat
- URL: http://beautifulcatsociety.org
- Hit Publish.
- Go to Settings > API Keys and *Create API keys.
- Name your keys however you want and copy both the Space ID and the Content Delivery API - access token
- Install dependencies via
npm
$ npm init -y
$ npm i contentful next react react-dom vercel
- Create a file names
.env.build
with the following content in the root folder of the project.
SPACE_ID=your_contentful_space_id
TOKEN=your_contentful_api_access_token
- Run on
localhost
$ npm run build && npm run dev
- Upload your API keys as specified on the
vercel.json
file but without using the@
sign to Vercel's Secrets vault.
$ vercel secrets add contentful_space_id your_contentful_space_id
$ vercel secrets add contentful_access_token your_contentful_api_access_token
- Deploy
- Option 1: Deploy via Github: https://vercel.com/docs/v2/git-integrations
- Option 2: Deploy with Vercel CLI: https://vercel.com/download