# Setting up Launch with NextJS

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/launch-foundations/setting-up-launch-with-nextjs |
| **course_slug** | launch-foundations |
| **lesson_slug** | setting-up-launch-with-nextjs |
| **markdown_file_url** | /academy/md/courses/launch-foundations/setting-up-launch-with-nextjs.md |
| **generated_at** | 2026-04-28T06:55:46.237Z |

> Part of **[Launch Foundations](https://www.contentstack.com/academy/courses/launch-foundations)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"03","type":"text","duration_minutes":1,"topics":["Setting","Launch","with","NextJS"]} -->

#### Lesson text

[Next JS](https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs) is an open-source React-based framework that provides a hybrid static/server-side rendered model. Using Next JS data fetching, you can render your content differently based on your application's use case and build APIs using API Routes.

Launch supports the following features of Next JS out of the box:

*   [API Routes](https://nextjs.org/docs/api-routes/introduction)
    
*   [SSR (Server Side Rendering)](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)
    
*   [ISR (Incremental Static Regeneration)](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration)
    

The fastest way to get started with Launch is to clone and deploy a [sample Contentstack NextJS Starter project](https://github.com/contentstack/contentstack-nextjs-starter-app/archive/refs/heads/master.zip). Launch allows you to create a project by importing the website code from GitHub.  
**Prerequisites**

1.  [Contentstack account](https://www.contentstack.com/login/)
    
2.  Access to Launch for your organization **(Note:** Only the Organization **Admin/Owner** has permissions to create Launch projects**)**
    
3.  [GitHub account](https://github.com/login)
    

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

1.  Log into Contentstack and click the Launch icon from the left navigation panel, as shown below:  
    
    ![LaunchFoundations\_L3\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7c5f1537b7dedfd/67dd8a5ac566ee66e85e0159/LaunchFoundations_L3_img-1.png)
    
2.  Click the **\+ New Project** button:  
    
    ![LaunchFoundations\_L3\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4a9d737d68f4d30d/67dd8a76a7145838ceb9b69a/LaunchFoundations_L3_img-2.png)
    
3.  In the **Create** **New Project** modal, click **Import from a Git Repository. (**Note: You can also choose to [upload a .zip file to create your project](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/).)  
    
    ![LaunchFoundations\_L3\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2e3fb5000f3c9fd/67dd8a90314d67fc181b70a4/LaunchFoundations_L3_img-3.png)
    
4.  Click **GitHub:**
    
    ![LaunchFoundations\_L3\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteb40b36ec25d1a8b/67dd8aa9dd73e3e0d8bf3565/LaunchFoundations_L3_img-4.png)  
      
    This will open a modal window to authenticate with your GitHub account.
    
5.  Enter your credentials and log in:  
    
    ![LaunchFoundations\_L3\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt339534025a5fcadd/67dd8ac1632b93658bd4a2ff/LaunchFoundations_L3_img-5.png)
    
6.  In the Repository Access section, select **All repositories.**  
    **Note**: If you want to choose specific repositories, pick the **Only select repositories** option and choose the required repository.  
    
    ![LaunchFoundations\_L3\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a4495329cd760ea/67dd8ad76f685886effda919/LaunchFoundations_L3_img-6.png)
    
7.  Click the **Save** button  
    Note: If you are accessing GitHub through Contentstack for the first time, you must authorize Contentstack by clicking the “Install & Authorize” button after selecting All repositories.  
    ![LaunchFoundations\_L3\_img-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt397bd7bf8f16cab2/67dd8aed037e2b157322db0e/LaunchFoundations_L3_img-7.png)
    
    Once you’ve connected your GitHub account, you’ll be redirected back to Launch.
    
8.  In the Create New Project modal, add the following details.
    
    1.  **Repository** (Mandatory): Select your Git repository.
        
    2.  **Git Branch** (Mandatory): By default, master or main is selected as the branch. You can choose another branch from the dropdown.
        
    3.  **Project Name** (Mandatory): This is auto-populated when you select the repository, but you can edit it as needed.
        
    4.  **Environment Name** (Mandatory): The environment name is automatically populated as Default, but can be changed. Note that this is specific to Launch and not directly related to any environments in your stack.
        
    5.  **Build and Output Settings** (Mandatory): The fields in this section get auto-populated based on the detected framework. (If no framework is detected, you can specify your own Build Command and Output Directory.)
        
    6.  **Environment Variables** (Optional): Enter the key and value of one or more environment variables. You can also use the “Connect and Import Variables” option to automatically import API-related variables from a specific stack and delivery token.  
        ![LaunchFoundations\_L3\_img-8.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt728a7cd2fe072875/67dd8b34460eb4da859478e4/LaunchFoundations_L3_img-8.png)  
        ![LaunchFoundations\_L3\_img-9.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83401745119aa83b/67dd8b3edb243f26ff12c40d/LaunchFoundations_L3_img-9.png)
        
          
        Note: Click Back to revert the changes and re-enter details.
        
9.  Once ready, click Deploy to save and deploy the project.  
    You’ll see the project’s status update in real time, from Queued to Deploying to Deployed. Note: depending on the size and complexity of your specific application, it may take several minutes to build and deploy your site.  
    
    ![LaunchFoundations\_L3\_img-10.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2506a961db71c9fc/67dd8b57c5b83e39fd924c90/LaunchFoundations_L3_img-10.png)Upon successful deployment, you will see the following screen:  
    
    ![LaunchFoundations\_L3\_img-11.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9def3772d270845e/67dd8b70f7eccc434690d97f/LaunchFoundations_L3_img-11.png)  
    You can preview the deployed website by copying the URL from the URL section under Deployment Information and opening it in a browser.  
    If you want to deploy the changes from any other commits, you can click the **Redeploy** button and choose the required commit.  
      
    ![LaunchFoundations\_L3\_img-12.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4102e28952c61f1/67dd8b8e443bd63c57f1cc07/LaunchFoundations_L3_img-12.png)
    
    Note: The log details of the current deployment can be found under the Logs section.  
    ![LaunchFoundations\_L3\_img-13.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b7272e3d6c6ac01/67dd8bb2339f298ac48b61c5/LaunchFoundations_L3_img-13.png)

#### Key takeaways

- Connect **Setting up Launch with NextJS** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

Setting up Launch with NextJS. Next JS (https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs) is an open-source React-based framework that provides a hybrid static/server-side rendered model. Using Next JS data fetching, you can render your content differently based on your application's use case and build APIs using API Routes. Launch supports the following features of Next JS out of the box: API Routes (https://nextjs.org/docs/api-routes/introduction) SSR (Server Side Rendering) (https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) ISR (Incremental Static Regeneration) (https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) The fastest way to get started

### Retrieval tags

- Setting
- Launch
- with
- NextJS
- launch-foundations
- lesson 03
- Setting up Launch with NextJS
- launch-foundations lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "03" and topics: [Setting, Launch, with, NextJS].
Parent course slug: launch-foundations. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| LaunchFoundations\_L3\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7c5f1537b7dedfd/67dd8a5ac566ee66e85e0159/LaunchFoundations_L3_img-1.png` |
| LaunchFoundations\_L3\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4a9d737d68f4d30d/67dd8a76a7145838ceb9b69a/LaunchFoundations_L3_img-2.png` |
| LaunchFoundations\_L3\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2e3fb5000f3c9fd/67dd8a90314d67fc181b70a4/LaunchFoundations_L3_img-3.png` |
| LaunchFoundations\_L3\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteb40b36ec25d1a8b/67dd8aa9dd73e3e0d8bf3565/LaunchFoundations_L3_img-4.png` |
| LaunchFoundations\_L3\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt339534025a5fcadd/67dd8ac1632b93658bd4a2ff/LaunchFoundations_L3_img-5.png` |
| LaunchFoundations\_L3\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a4495329cd760ea/67dd8ad76f685886effda919/LaunchFoundations_L3_img-6.png` |
| LaunchFoundations\_L3\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt397bd7bf8f16cab2/67dd8aed037e2b157322db0e/LaunchFoundations_L3_img-7.png` |
| LaunchFoundations\_L3\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt728a7cd2fe072875/67dd8b34460eb4da859478e4/LaunchFoundations_L3_img-8.png` |
| LaunchFoundations\_L3\_img-9.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83401745119aa83b/67dd8b3edb243f26ff12c40d/LaunchFoundations_L3_img-9.png` |
| LaunchFoundations\_L3\_img-10.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2506a961db71c9fc/67dd8b57c5b83e39fd924c90/LaunchFoundations_L3_img-10.png` |
| LaunchFoundations\_L3\_img-11.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9def3772d270845e/67dd8b70f7eccc434690d97f/LaunchFoundations_L3_img-11.png` |
| LaunchFoundations\_L3\_img-12.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4102e28952c61f1/67dd8b8e443bd63c57f1cc07/LaunchFoundations_L3_img-12.png` |
| LaunchFoundations\_L3\_img-13.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b7272e3d6c6ac01/67dd8bb2339f298ac48b61c5/LaunchFoundations_L3_img-13.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Next JS | `https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs` |
| API Routes | `https://nextjs.org/docs/api-routes/introduction` |
| SSR (Server Side Rendering) | `https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props` |
| ISR (Incremental Static Regeneration) | `https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration` |
| sample Contentstack NextJS Starter project | `https://github.com/contentstack/contentstack-nextjs-starter-app/archive/refs/heads/master.zip` |
| Contentstack account | `https://www.contentstack.com/login/` |
| GitHub account | `https://github.com/login` |
| LaunchFoundations\_L3\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7c5f1537b7dedfd/67dd8a5ac566ee66e85e0159/LaunchFoundations_L3_img-1.png` |
| LaunchFoundations\_L3\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4a9d737d68f4d30d/67dd8a76a7145838ceb9b69a/LaunchFoundations_L3_img-2.png` |
| upload a .zip file to create your project | `https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/` |
| LaunchFoundations\_L3\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2e3fb5000f3c9fd/67dd8a90314d67fc181b70a4/LaunchFoundations_L3_img-3.png` |
| LaunchFoundations\_L3\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteb40b36ec25d1a8b/67dd8aa9dd73e3e0d8bf3565/LaunchFoundations_L3_img-4.png` |
| LaunchFoundations\_L3\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt339534025a5fcadd/67dd8ac1632b93658bd4a2ff/LaunchFoundations_L3_img-5.png` |
| LaunchFoundations\_L3\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a4495329cd760ea/67dd8ad76f685886effda919/LaunchFoundations_L3_img-6.png` |
| LaunchFoundations\_L3\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt397bd7bf8f16cab2/67dd8aed037e2b157322db0e/LaunchFoundations_L3_img-7.png` |
| LaunchFoundations\_L3\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt728a7cd2fe072875/67dd8b34460eb4da859478e4/LaunchFoundations_L3_img-8.png` |