Contentful Integration

⚠️ Important 👷‍♀️🚧

Please note CMS is an optional feature included in the Stacks workspace. To turn off CMS please remove the folder ../src/ssr/pages/cms inside ssr/pages before building and make sure the tsconfig does not include these files.

This implementation showcases NextJS's Static Generation feature using Contentful as the data source.

Tools used

Configuration

Create an account and a space on Contentful

  1. First, create an account on Contentful.

  2. After creating an account, create a new empty space from the dashboard

  3. Create the Content Delivery API - access token field of your API key

  4. Create the Content Preview API - preview token field of your API key

Using Contentful

Requirements

See Contentful for more information.

Set the default local to en-GB

You can change the local in Contentful, note that default in Contentful is en-US:

Contentful Management Token

Please updated the environment variable NEXT_PUBLIC_CONTENTFUL_DEFAULT_LOCALE - ../src/ssr/environment-configuration/environment-variables.js with the right locale

Set up the tokens

Get the tokens from your account, ensuring that you have created a new management access token.

Contentful Management Token

Contentful Access Token

export CONTENTFUL_MT= \
export NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN= \
export NEXT_PUBLIC_CONTENTFUL_PREVIEW_ACCESS_TOKEN= \
export NEXT_PUBLIC_CONTENTFUL_SPACE_ID=

Importing content with the Contentful CLI

We have provided an example export of the Blog model used with Amido Stacks, supporting:

  • locals
  • translations (en-GB, it-IT)

For an example of how this is used in the Server Side Rendered Webapp, see our deployed server side rendered solution

After you have the import CLI tool installed and have configured your environment, and at the command line:

contentful space import --content-file contentful-export-amidostacks-example.json --mt $CONTENTFUL_MT --space-id $NEXT_PUBLIC_CONTENTFUL_SPACE_ID

This will then populate your space with the Stacks blog posts, following the model, ensuring that you can get going faster.

Content model

The Stacks Yumido example uses the following content model:

Author

  • name - Short text field
  • picture - Media field

Post

  • title - Text field (type short text)
  • content - Rich text field
  • excerpt - Text field (type short text, full-text search)
  • coverImage - Media field (type one file)
  • 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

Content model overview

Step 3. Populate content

Important: For each entry and asset, you need to click on Publish.

To Run

npx cross-env NEXT_PUBLIC_CONTENTFUL_SPACE_ID={YOUR_SPACE_ID} \
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN={ACCESS_TOKEN} \
NEXT_PUBLIC_CONTENTFUL_PREVIEW_ACCESS_TOKEN={PREVIEW_TOKEN} \

⚠️ Important 👷‍♀️

Locale switcher strictly relies on the route. For example the route has to always start with /blog/posts and should following slug should always start with locale string (if multiple locales are enabled) e.g. blog/posts/it-IT/documentation-demo.

References

https://next-blog-contentful.now.sh/

Localization and Internationalization

Stacks relies on contentful to supplies the locales needed for translations.

For the purposes of demo

  • Two locales have been created in Contentful (en-GB and it-IT) Locales
  • Each post and field entry would contain 2 locales for eg. slugs are prefixed with en-GB and it-IT. Field translate
  • NextJS static page generator builds dynamic pages and paths using the slug data. Build output
  • Added a language switcher in the blog post pages in the header. The switcher will update the URL to relative prefixed path for eg: /posts/it-IT/documentation-demo refer the image below published_blog