Features Docs Pricing Mastery Sessions Blog Log in
    Features Docs Pricing Mastery Sessions Blog Log in
    • Welcome
    • Getting started
    • Concepts
      • Folders
    • Online Studio
      • Comments
      • Source Code Management
      • User's Preferences
    • CLI
    • VSCode Extension
    • Design Tokens
      • Icon prefixUsing Style-Dictionary & Figma
      • Icon prefixUsing Specify
      • Icon prefixUsing CSS Custom properties
      • Icon prefixUsing System-UI
    • Stories
    • Testing
    • Using the DS in your app
      • Standard procedure
      • Icon prefixCreate React App (CRA)
      • Icon prefixNuxt 3
      • Icon prefixNext.js 11 and earlier
      • Icon prefixNext.js 12 and later
      • Icon prefix11ty (with Nunjucks)
    • Design System Examples
    • How-tos
      • How to load an image
    • Technologies Demos
    • Technologies
      • Icon prefixJavaScript
      • Icon prefixTypeScript
      • Icon prefixJSX
      • Icon prefixComponent Story Format
      • Icon prefixCustom Elements Manifest
      • Icon prefixReact
      • Icon prefixPreact
      • Icon prefixVue 3
      • Icon prefixSvelte
      • Icon prefixStencil
      • Icon prefixRiot
      • Icon prefixµce
      • Icon prefixPrism
      • Icon prefixAssemblyScript
      • Icon prefixWebAssembly Text Format
      • Icon prefixCSS
      • Icon prefixSass
      • Icon prefixLess
      • Icon prefixmarkdown
      • Icon prefixmdjs
      • Icon prefixMD Vue
      • Icon prefixMDX
      • Icon prefixMDsveX
      • Icon prefixNunjucks
      • Icon prefixpug
      • Icon prefixVS Code Custom Data Format
      • Icon prefixStyle Dictionary
    • Supported config files
      • package.json
      • studio.config.json
      • tsconfig.json
      • tailwind.config.js
      • eslint
      • prettier
      • stories.preview
      • custom-elements-manifest.config.mjs
      • sd.config.{json,js}
    • FAQ

    Using your Design System on Next.js 12 and later #

    INFO

    If you are using an older version of Next.js, please see Using your Design System on Next.js 11 and earlier .

    Install & Usage #

    Since Next.js 12 , Native ES Modules are supported so you can follow the Standard procedure .

    Next.js 11 and earlier
    11ty (with Nunjucks)