⚠️ Important 👷♀️🚧
Please note CMS is an optional feature included in the Stacks workspace. To turn off CMS please remove the folder
../src/ssr/pages/cmsinside 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.
Create an account and a space on Contentful
First, create an account on Contentful.
After creating an account, create a new empty space from the dashboard
Create the Content Delivery API - access token field of your API key
Create the Content Preview API - preview token field of your API key
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:
Please updated the environment variable NEXT_PUBLIC_CONTENTFUL_DEFAULT_LOCALE -
../src/ssr/environment-configuration/environment-variables.jswith the right locale
Set up the tokens
Get the tokens from your account, ensuring that you have created a new management access token.
Importing content with the Contentful CLI
We have provided an example export of the Blog model used with Amido Stacks, supporting:
- 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.
The Stacks Yumido example uses the following content model:
name- Short text field
picture- Media field
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
author- Reference field
Step 3. Populate content
Important: For each entry and asset, you need to click on Publish.
⚠️ Important 👷♀️
Locale switcher strictly relies on the route. For example the route has to always start with
/blog/postsand should following slug should always start with locale string (if multiple locales are enabled) e.g.
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)
- Each post and field entry would contain 2 locales for eg. slugs are prefixed with en-GB and it-IT.
- NextJS static page generator builds dynamic pages and paths using the slug data.
- 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