125k

Gatsby

PreviousNext

Gatsby 用に shadcn/ui をインストールして構成します。

プロジェクトの作成

まず、create-gatsby を使用して新しい Gatsby プロジェクトを作成します。

npm init gatsby

TypeScript と Tailwind CSS を使用するように Gatsby プロジェクトを構成する

プロジェクトを構成するため、いくつかの質問が表示されます:

✔ What would you like to call your site?
· your-app-name
✔ What would you like to name the folder where your site will be created?
· your-app-name
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· Choose whatever you want
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Choose whatever you want
✔ Shall we do this? (Y/n) · Yes

tsconfig.json ファイルを編集する

パスを解決するため、次のコードを tsconfig.json ファイルに追加します。

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

gatsby-node.ts ファイルの作成

プロジェクトのルートに gatsby-node.ts ファイルがまだ存在しない場合は作成し、アプリがパスを解決できるように、以下のコードを gatsby-node ファイルに追加します。

import * as path from "path"
 
export const onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@/components": path.resolve(__dirname, "src/components"),
        "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
      },
    },
  })
}

CLI を実行します

shadcn init コマンドを実行して、プロジェクトをセットアップします。

pnpm dlx shadcn@latest init

以上です

これで、プロジェクトへのコンポーネントの追加を開始できます。

pnpm dlx shadcn@latest add button

上記のコマンドは、Button コンポーネントをプロジェクトに追加します。次に、次のようにインポートできます。

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}