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.




Here’s a quick 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.

In this tutorial, we will first go through the steps involved in configuring Contentstack and then look at the steps required to customize and use the presentation layer.

  1. Create a stack

    Log in to your Contentstack account, and create a new stack. This stack will hold all the data, specific to your website. Learn more on how to create a stack.

  2. Add a publishing environment

    To add an environment in Contentstack, navigate to Settings -> Environment, and click on the + New Environment tab. Provide a suitable name for your environment, say ‘staging’. Specify the base URL (e.g., ‘’), and select the language (e.g., English - United States). Then, click on Save. Read more about environments.

  3. Import content types

    A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

    For this website, three basic content types are required: Header, Footer, and Home. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your own content types. Learn how to do this).

    To import the content types, first, save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack. The next screen prompts you to either create a new content type or import one into your stack. Click the ‘Import’ link, and select the JSON file saved on your machine.

    Note: Import JSON files in the sequence: 'header.json', 'footer.json', and 'home.json'.

    Here’s a brief overview of all the content types required for this project.

    • Header: The ‘Header’ content type enables you to add content for the header section of your website.
    • Footer: The ‘Footer’ content type enables you to add content for the footer section of your website.
    • Home: The ‘Home’ content type enables you to add content for the home page of your website, which mainly includes the main banner and portfolio. Also, we need to include the reference for the header and footer content types.

    Download All Content Types

    Now that all the content types are ready, let’s add some content for your website.

  4. Adding content

    Create and publish entries for the ‘Header’ and ‘Footer’ content types

    Using the ‘Header’ content type, add the menu details for your website. Similarly, add footer content using the ‘Footer’ content type. Learn how to create and publish entries.

    Create and publish entry for the ‘Home’ content type

    Add an entry for the ‘Home’ content type. The ‘Home’ content type also includes two reference fields : ‘Header’ and ‘Footer’. You need to select the respective entries in these fields. Save and publish the entry. Learn how to create and publish entries.

    With this step, you have created sample data for your website.

  5. Build and configure website

    To get your app up and running quickly, we have created a sample website (using Node.js and Next.js) for this project. You simple need to download it and change the configuration.

    Download code

    Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the website. Read more about our CDN-enabled content delivery system.

    Once you have downloaded the project, add your Contentstack API Key, Delivery Token, and Environment to the project. (Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)

    The next.config.js file would look something like this:

    module.exports = {
      env: {
        api_key: "Your apikey",
        delivery_token: "Your delivery token",
        environment: "Your publishing environment",

    Fire up your terminal (command prompt or similar on Windows), point it to your project location and run the following:

    npm install
    npm run dev

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

  6. Go live

    You can make the application live by deploying it on any cloud hosting service. In this tutorial, we have used Zeit’s Now. You can download ‘Now’ from here.

    Run ‘now' to deploy. Every time you run 'Now', you get a new deployment!

    $ now

    The first time you run 'Now', it will ask for your email address for verification. Simply click on the email you have received, and you will be logged in automatically.

    Once the deployment has started, you will get a link (copied to your clipboard) that you can share immediately with your peers, even before the upload and startup completes!

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page