React Templates & Themes Logo React Templates & Themes
Compose Starter Helpcenter Nextjs screenshot

Compose Starter Helpcenter Nextjs

Author Avatar Theme by Contentful
Updated: 12 Mar 2024
60 Stars

A sample website frontend for Compose with Next.js

Github Live Preview

Categories

Nextjs Tailwind Contentful

Overview:

Compose Starter: Help Center + Next.js is a sample website frontend that serves as a starting point for developers wanting to use Compose and Next.js. It provides an example that can be used with Compose’s quick start “Simple website” content model for empty spaces. The website can be deployed locally or on Vercel and utilizes technologies such as Next.js, TypeScript, and Tailwind CSS. The project structure includes pages, components, and a lib directory. The content types used in the website are generated using the cf-content-types-generator tool.

Features:

  • Sample website frontend for Compose and Next.js
  • Support for Compose’s “Simple website” content model
  • Easy deployment using Vercel or manual deployment steps
  • Utilizes Next.js, TypeScript, and Tailwind CSS
  • Well-organized project structure with pages, components, and lib directories
  • Generation of content types using cf-content-types-generator
  • Community support available through the Contentful Community Forum and Slack
  • Licensed under the MIT license

Installation:

To install and run the Compose Starter: Help Center + Next.js theme, follow these steps:

  1. Install the dependencies by running the following command:
npm install
  1. Copy the .env.example file to .env and adapt the environment variables to your setup:
  • CF_SPACE_ID: The ID of a Compose compatible space to be used
  • CF_DELIVERY_ACCESS_TOKEN: A delivery API key for the space
  • CF_PREVIEW_ACCESS_TOKEN: A preview API key for the space
  1. Start the website on http://localhost:3000 by running the following command:
npm run dev

If you prefer to deploy the app using Vercel, you can follow these steps:

  1. Click the “Deploy with Vercel” button to easily deploy the app. This will automatically set up the project on Vercel.

  2. For manual deployment, follow these steps:

  • Open your Vercel dashboard and click on “New project”.
  • Click on “Import a Third-Party Git Repository” and enter the URL of the Compose Starter: Help Center + Next.js repository.
  • Choose the Vercel scope where you want to deploy the app (e.g., your personal scope).
  • Add the 3 environment variables (CF_SPACE_ID, CF_DELIVERY_ACCESS_TOKEN, CF_PREVIEW_ACCESS_TOKEN) in the project settings.
  • Once the deployment run completes, you will see the app at the URL generated by Vercel.

Summary:

Compose Starter: Help Center + Next.js is a sample website frontend designed to assist developers in getting started with Compose and Next.js. It provides a ready-to-use example that can be used with Compose’s “Simple website” content model. The theme offers easy installation and deployment options, allowing developers to deploy the website locally or on Vercel. With its use of Next.js, TypeScript, and Tailwind CSS, the frontend is built on modern web development technologies. The project structure is well-organized, with distinct directories for pages, components, and lib. The generation of content types ensures synchronization with the space used. Overall, Compose Starter: Help Center + Next.js is a versatile and convenient solution for developers looking to kickstart their website development with Compose and Next.js.