Atlassian Design System KitをNext.jsとTypeScriptでインストールする方法

1. プロジェクトの準備: まず、Next.jsとTypeScriptのプロジェクトを作成します。以下のコマンドを実行して、新しいプロジェクトを作成します。

npx create-next-app@latest --typescript

2. Atlassian Design System Kitのインストール: 作成したプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してAtlassian Design System Kitをインストールします。

npm install @atlaskit/design-system

3. コンポーネントの利用: Atlassian Design System Kitのコンポーネントを利用するには、必要なコンポーネントをインポートして使用するだけです。以下は、Buttonコンポーネントを利用する例です。

import { Button } from '@atlaskit/design-system';
function MyButton() {
  return <Button appearance="primary">Click me</Button>;
}
export default MyButton;

4. ビルドと実行: プロジェクトをビルドし、Next.jsの開発サーバーを起動します。以下のコマンドを実行してください。

npm run build
npm run dev

これで、Atlassian Design System KitをNext.jsとTypeScriptプロジェクトにインストールし、コンポーネントを利用する準備が整いました。必要に応じて、他のコンポーネントや機能を試してみてください。