Tailwind Next.js Contentful Starter

This is a Stackbit starter site built with Next.js, Contentful and Kometa UI Kit Free Tailwind components.

Click the button below to create a new website from this starter using Stackbit:

The starter can be used to generate a static website using Next.js Static Site Generation Support. The contents of the website are managed by Contentful, a Headless CMS. When the website is generated, Sourcebit is used to fetch the site's contents from Contentful and provides it to Next.js as React props. Once Next.js finishes generating the static website, a serverless deployment platform such as Netlify can deploy the static files to its CDN.

Quick Start 🏎

Create a site from this starter using Stackbit.

Prerequisites: You'll need to have a GitHub and a Contentful accounts and connect them with Stackbit.

Stackbit will run the following steps for you

• Create a new GitHub repository with the contents of this repository.
• Create a new Contentful project and provision it with the initial contents stored in export.json file.
• Create a new Netlify site connected to the GitHub repo
• Deploy the Netlify site.
• Create a Stackbit project that will allow you edit your website via on-page visual editing experience.

Additionally, Stackbit will connect all three services together:

• Create a "commit" webhook in GitHub repository that will trigger Netlify deployment as soon as new commit is pushed to GitHub.
• Create a "publish" webhook in Contentful that will trigger Netlify deployment as soon as content is published in Contentful.

Editing Content 📝

Once Stackbit creates a site, you can start editing the content using the free on-page editing experience provided by the Stackbit Studio.

Here's a few resources to get you started:

• 📺   Editing Content
• 📺   Adding, Reordering and Deleting Items
• 📺   Collaboration
• 📺   Publishing
• 📚   Stackbit Documentation

If you need a hand, make sure to check the Stackbit support page.

Develop Locally 🛠

1. Follow the steps in the Quick Start to create a new site.

2. Once the new site is created, you will be redirected to Stackbit Studio where you will be able to edit the content using the free on-page editing experience, and publish new versions of your site.

3. To develop your site locally, clone the new repository created for you by Stackbit. You can get the link to your repository from the settings panel in Stackbit.

4. Install npm dependencies:

   npm install

5. Set the following environment variables locally.

   • CONTENTFUL_SPACE_ID - Contentful Space ID. You can acquire the space ID from Contentful's app URL: https://app.contentful.com/spaces/<SPACE_ID>. You can get the link to your Contentful space from the settings panel in Stackbit.
   • CONTENTFUL_PREVIEW_TOKEN - Content Preview API - access token. You can acquire this token from Contentful's app in API Key's section - "Settings" => "API Keys" => "Content delivery / preview tokens" => "Add API Key" or pick one Stackbit generated for you.

   export CONTENTFUL_SPACE_ID=ABC
   export CONTENTFUL_PREVIEW_TOKEN=XYZ

   When running Next.js in dev mode with the "Preview" token, Sourcebit will fetch unpublished changes from Contentful, therefore you don't need to pusblish every change you do.

6. Start the Next.js local development server by running:

   npm run dev

7. Open http://localhost:3000/ in the browser to see your site. You can now edit the site's code or the content in Contentful, and the browser will auto-update your changes. 🎉

Building for production 🏗

To build a static site for production follow these steps:

1. Set the following environment variables:

   • CONTENTFUL_SPACE_ID - Contentful Space ID. You can acquire the space ID from Contentful's app URL: https://app.contentful.com/spaces/<SPACE_ID>. You can get the link to your Contentful space from the settings panel in Stackbit.
   • CONTENTFUL_DELIEVERY_TOKEN - Content Delivery API - access token. You can acquire this token from Contentful's app in API Key's section - "Settings" => "API Keys" => "Content delivery / preview tokens" => "Add API Key" or pick one Stackbit generated for you.

   export CONTENTFUL_SPACE_ID=ABC
   export CONTENTFUL_DELIEVERY_TOKEN=XYZ

   Note: when building for production, you should use the Content Delivery key to fetch the published content, not the Content Preview key.

2. Run the following command to build your site

   npm run build

3. The exported site will be written to the out folder. The contents of this folder can be deployed by serverless deployment platform such as Netlify.

Contributing 🙏

To contribute to this theme please follow the following steps:

1. Clone this repository locally

2. Login into Contentful and create a new empty Space

3. Create new Contentful Personal Access Tokens here

4. Install dependencies

   npm install

5. Import Contentful data stored in contentful-export/export.json to the new space by running the following command. Replace the <management_token> placeholder with your Personal Access Token and the <space_id> placeholder with the new space ID.

   ./contentful-export/import.js <management_token> <space_id>

6. Create "Content Preview API - Access Token" via Contentful app "Settings" => "API Keys" => "Content delivery / preview tokens" => "Add API Key".

7. Define following environment variables to allow Sourcebit to fetch the content from Contentful when developing or building the site. Replace {SPACE_ID} with your Space ID and {CPA} with the mew Content Preview API - access token.

   export CONTENTFUL_SPACE_ID={SPACE_ID}
   export CONTENTFUL_PREVIEW_TOKEN={CPA}

8. Lastly, run the development server (from project folder):

   npm run dev

   Navigate to http://localhost:3000 to see the site. You can work on the site's code, edit content and define new or update existing content-types in Contentful.

9. Once you finish updating the code and content, export the Contentful data back to the contentful-export/export.json file by running the following command. Replace the <management_token> placeholder with your Personal Access Token and the <space_id> placeholder with the new space ID.

   ./contentful-export/export.js <management_token> <space_id>

10. Commit, push and submit a pull-request 🎉

Learn More 📚

To learn more about Stackbit, take a look at the following resources:

• Stackbit Documentation
• Configure your site using stackbit.yaml

To learn more about Sourcebit, take a look at the following resources:

• Sourcebit - learn how to use Sourcebit with different Headless-CMS and Static Site Generators.
• sourcebit-source-contentful - learn more about Sourcebit Contentful Plugin.
• sourcebit-target-next - learn more about Sourcebit Next.js Plugin.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

To learn more about Contentful, take a look at the following resources:

• Contentful Docs
• Importing and exporting content with the Contentful CLI

To learn more about Netlify, take a look at the following resources:

• Netlify Docs