DÁP Design System

Unfortunately, SSR rendering of webcomponents are famously not really well supported in Next.js. The best way to use the DÁP Design System in Next.js, is to use client side rendering with the use client option.

Installation

npm install dap-design-system

Usage with App router

First somewhere in your project you have to load the library, for example in your main layout component:

Create a client side component to wrap the layout render:

'use client'

import { ReactNode, useEffect } from 'react'

export default function ClientApplication({
  children,
}: {
  children: ReactNode
}) {
  useEffect(() => {
    async function getComponents() {
      await import('dap-design-system/dist/dds')
    }

    getComponents()
  }, [])

  return children
}

Import the CSS variables, the Inter font and wrap the layout in your root layout component:

import localFont from 'next/font/local'
import { ReactNode, Suspense } from 'react'
import 'dap-design-system/dist/light.theme.css'

import ClientApplication from '@/app/clientApplication'

const inter = localFont({
  src: '[path to your font, check the Typography page]',
  display: 'swap',
  weight: '500 700',
  style: 'normal',
  declarations: [
    { prop: 'font-feature-settings', value: "'liga' 1,'calt' 1,'ss02' 1" },
    { prop: 'font-variation-settings', value: "'slnt' 0" },
    { prop: 'font-optical-sizing', value: 'auto' },
  ],
})

export default async function RootLayout({
  children,
}: Readonly<{
  children: ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ClientApplication>
          <Suspense fallback={<Loading />}>
            <main className="main" id="root">
              {children}
            </main>
          </Suspense>
        </ClientApplication>
      </body>
    </html>
  )
}

After these steps you can use the DÁP Design System components in your Next.js project. Do not forget to use the use client directive.