Launch Quick Start Guide with NextJS

The fastest way to get started with Launch is to clone and deploy a sample Contentstack NextJS Starter project. Launch allows you to create a project by importing the website code from GitHub.

• Contentstack account
• A Stack created in CMS
• Launch-enabled Organization with Owner or Admin permissions
• GitHub account

• How to import a GitHub repository into Launch.
• How to configure build and output settings for a NextJS project.
• How to add the environment variables the NextJS Starter requires.
• How to deploy the project and preview the live site.

Follow the steps given below to deploy your first Launch project using GitHub:

1. Clone the Kickstart NextJS repository and create a stack in CMS, referring to the steps in Kickstart Next.js (Client-Side Rendering – CSR).
2. Log in to Contentstack and click the Launch icon from the dashboard, as shown below:
   Click to enlarge
   
   Alternatively, go to the App Switcher in the top panel and click the Launch icon.
   Click to enlarge
3. Click the + New Project button to initiate the project creation process.
   Click to enlarge

4. Select GitHub to import the project from a Git repository.
   Click to enlarge

   Note You can also choose to import a project using the BitBucket Cloud or upload a .zip file.

   A new page opens. Sign in or create a new GitHub account.
5. Enter your credentials and log in.
   If you are accessing GitHub through Contentstack for the first time, you must authorize Contentstack by clicking the Install & Authorize button.

   Note By default, the All repositories option is selected. If you want to choose specific repositories, select the Only select repositories option and choose the required repository.

   Click to enlarge
    You will be redirected to the Launch app.
6. In the Deploy Your New Project modal, select your Git repository.
   Click to enlarge
7. In the screen that appears, add the following details:
   • Importing from (Mandatory): By default, master or main is selected as the branch. You can choose another branch from the dropdown.
   • Project Name (Mandatory): Gets auto-populated on selecting the repository. You can edit it as per your requirement.
   • Environment Name (Mandatory): Enter the name of the environment.
     Click to enlarge
   • Framework Preset, Output Directory, and Build Command: Auto-populates based on the detected framework.
   • Response Mode:
     • Streaming: Delivers response chunks in real time as they are generated.
     • Buffered: Displays output only after the entire response has been generated.

     Note Buffered is selected by default.

     Click to enlarge
   • Enable Contentstack Authentication: By default, Contentstack Authentication is enabled for your project environment.
   • Environment Variables (Optional): Enter the key and value of one or more environment variables.

     For the Contentstack NextJS Starter to work, provide the following environment variables:

     123456

     NEXT_PUBLIC_CONTENTSTACK_API_KEY=your_api_key_here
     NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token_here
     NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=your_preview_token_here
     NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=your_environment_here
     NEXT_PUBLIC_CONTENTSTACK_REGION=EU # Options: NA, EU, AU, AZURE-NA, AZURE-EU, GCP-NA, GCP-EU
     NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true # Set to true to enable preview

     Click to enlarge

   Note Click Back to revert the changes and re-enter details.

8. Once ready, click Deploy to save and deploy the project.

   At first, the screen shows the Deploying status while the project deployment is in progress.

   Click to enlarge

Upon successful deployment, the system displays the confirmation screen. You can preview the deployed website by clicking the icon next to the URL in the Domains section: 

Click to enlarge

If you want to deploy the changes from any other commits, you can click the Redeploy button and choose the required commit.

Click to enlarge

Note The log details of the current deployment can be found under the Logs section.

Click to enlarge