🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

github.com/carbon-design-system/ibm-dotcom-library-nextjs-template

Package Overview
Dependencies
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/carbon-design-system/ibm-dotcom-library-nextjs-template

Source
Go Modules
Version
v0.0.0-20250319204359-34c221287a8d
Version published
Created
Source

Carbon for IBM.com React with Next.js Template

Table of Contents

  • Overview
  • Getting Started
  • Things to Note

Overview

This is a Next.js template utilizing Carbon for IBM.com React, deploying a vanilla instance of Next.js with the DotcomShell, along with other various patterns and components available in Carbon for IBM.com.

Getting Started

Get the code by cloning this repo using git

git clone https://github.com/carbon-design-system/carbon-for-ibm-dotcom-nextjs-template.git

Once cloned, go to the project directory to install dependencies and build the project

$ yarn && yarn build

In order to enable features like Right-to-Left (RTL), you will have to set environment variables in a .env file. Please see .env.example.

BASE_PATH=<Sets the base directory for urls and assets, default is '' >
ALTLANG_ROOT_PATH=<Sets the root path for language alternative urls, default is '/' >
ENABLE_RTL=<Boolean to enable RTL for the page, eg. false >
SASS_PATH=node_modules:src

Then start the application:

$ yarn dev

To export to a static site, run the following:

$ yarn build-export

Then the contents of the out folder can be uploaded to your production environment.

SASS compilation and carbon-components

There may be times pathing errors are encountered when importing certain stylesheets (like carbon-components). We're working hard to fix these, but in the meantime you can add the following to your .env file to resolve:

SASS_PATH=node_modules:src

Note: For Windows, the syntax is slightly different

SASS_PATH=./node_modules;./src

Right-to-Left (RTL)

Right-to-left rendering is supported, to enable set the ENABLE_RTL environment variable to true.

Things to Note

If building an IBM.com page, there are items that need to be included which can be viewed here: Building for IBM.com

Page Language

This template handles page language functionality, where the available languages are defined in components/data/altlang.json. The Altlangs component then generates all alternate links to be injected into the <head> element.

Digital Data Object

The Digital Data Object (DDO) is a flexible, customizable collection of metadata that also provides tools and services such as live chat and analytics to page authors. You can find more details on Building for IBM.com.

The template has a placeholder DDO you can define located in `pages/data/DDO.json. Example values shown below:

<script>
  digitalData = {
    page: {
        category: {
            primaryCategory: '' // e.g. SB03
        },
        pageInfo: {
            effectiveDate: '', // e.g. 2014-11-19
            expiryDate: '', // e.g. 2017-11-19
            language: '', // e.g. en-US
            publishDate: '', // e.g. 2014-11-19
            publisher: '', // e.g. IBM Corporation
            version: 'Carbon for IBM.com',
            ibm: {
                contentDelivery: '', // e.g. ECM/Filegen
                contentProducer: '', // e.g. ECM/IConS Adopter 34 - GS83J2343G3H3ERG - 11/19/2014 05:14:02 PM
                country: '', // e.g. US
                industry: '', // e.g. B,U
                owner: '', // e.g. Some Person/City/IBM
                siteID: '', // e.g. MySiteID
                subject: '', // e.g. SW492
                type: '' // e.g CT305
            }
        }
    }
  };
</script>

Meta Tags and Analytics

The template already renders the required meta tags and IBM.com analytics script that are required for IBM.com websites. They are located in pages/_app.js.These can be adjusted/removed to fit your project and needs.

Meta Tags:

<meta charset="UTF-8" />

<link rel="icon" href="//www.ibm.com/favicon.ico" />

<meta name="dcterms.date" content="YYYY-MM-DD" />
<meta name="dcterms.rights" content="© Copyright IBM Corp. 2016" />
<meta name="geo.country" content="US" />
<meta name="robots" content="index,follow" />

IBM.com Tag Management and Site Analytics Script

<!-- IBM Tag Management and Site Analytics -->
<script src="//1.www.s81c.com/common/stats/ibm-common.js" defer></script>

Upgrading from the Template

To pull latest changes from the Carbon for IBM.com NextJS template, this repo can be added as a remote to your application repository:

git remote add template https://github.com/carbon-design-system/carbon-for-ibm-dotcom-nextjs-template.git

Then run git fetch to update the changes:

git fetch --all

And finally merge changes in:

git merge template/main

FAQs

Package last updated on 19 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025