Contentstack Demonstrates 295% ROI as Part of New Go Composable Initiative295% ROI with ContentstackRead more

Build a website using Next.js and Contentstack

Next.js is a minimalistic framework for server-rendered React applications. This example website is built on top of Next.js and uses Contentstack’s Node.js SDK. It uses Contentstack to store and deliver the content of the website.

Note: This sample app is under maintenance. We recommend you to check out our latest Next.js Starter App which will help you create a cleaner and efficient app in quick steps.


Here’s a guide on how to create this demo website using Next.js and Contentstack.


Note: For this tutorial, we have assumed that you are familiar with Contentstack and Next.js. If not, then please refer to the docs (Contentstack docs and Next.js docs) for more details.

Here is an overview of the steps involved in creating our Next.js app:

  1. Create and Configure a Stack
  2. Generate Management Token
  3. Import Content Types and Content
  4. Create Delivery Token
  5. Build and Configure the Website
  6. Deploy the Website
  1. Create and Configure a Stack

    A stack holds all the data (entries and assets) that you would need to create a website. Log in to your Contentstack account, and create a new stack. Note down the master language and the stack API key as you will need these in Step 3.

  2. Generate Management Token

    Management Tokens provide you with read-write access to your stack resources. Create a Management token as shown in the documentation. Note down the Management token and the stack API key. You will need these to import content into your stack in the next step.

  3. Import Content Types and Content

    For quick setup, we have already created a zip file that contains the required content types, content (entries and assets), languages, and environments that you need to get the website up and running.

    You can directly import these resources into your stack by using our command-line interface (CLI):

    1. Install the CLI:

      npm install -g @contentstack/cli
    2. Use the Add Token command to add the management token to this CLI session with an alias:

      csdx auth:tokens:add -a <alias_for_token> -k <API_key_of_stack> -t <value_of_management_token>
      For example:
      csdx auth:tokens:add -a mytoken -k blt1d********** -t cs57e**********
    3. Download the content zip file, extract it, and note down its path to use in the next step.

    4. In the Import content command, pass the management token along with the content location (noted in the above step) to import the content:

      csdx cm:import -a <management_token_alias> -d "<path_where_content_folder_is_stored>"
      For example:
      csdx cm:import -a mytoken -d "C:\Users\Name\Desktop\cli\content\contents"

    This will import all the assets, content types, entries, languages, and environments into your stack, and then automatically publish the imported entries and assets to all the environments.

  4. Create Delivery token

    A delivery token lets you fetch published content of an environment. You can create a delivery token for the “local” environment for testing that we will use in the next step. Later, while deploying your site, you can create tokens for other environments.

  5. Build and configure website

    Download the website code

    Navigate to the root folder, create a configuration file named .env.development.local, and provide your credentials:

    API_KEY = {api_key_of_your_stack}
    DELIVERY_TOKEN = {delivery_token_of_the_environment}
    ENVIRONMENT = {environment_name}
    REGION = eu //Compulsory param for Europe users. For Azure North America users, enter param as "azure-na". North America users are not required to add this param.

    Note: To use the Europe region, set REGION=eu. Similarly, to use the Azure North America region, set REGION=azure-na.

    Fire up your terminal, point it to your project location, and run the following commands:

    npm install
    npm run dev

    Note: This will work on Node.js version 6.10.0 or above.

    That’s it!

    You can now view the website at http://localhost:3000/. And you also have the stack that has all the content and resources for the website. Try experimenting by creating new entries and publishing on the “local” environment. You should be able to see the changes on the website at localhost.

  6. Deploy the Website

    The easiest and the quickest way to deploy a Next.js website on production is to use Vercel, since it’s a product by Next.js creators. You need a Vercel account before you start deploying.

Note: During deployment, for the REGION variable, pass the value as follows:
North America: na
Europe: eu
Azure North America: azure-na

Additional Resource: We have built an example Marketing app using React JS with Contentstack, To know more about this, read our guide on how to build a Marketing App Using Contentstack and React.js.

Was this article helpful?