Docs
Gatsby

Gatsby

Gatsbyのインストールと設定

プロジェクトを作成する

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

npm init gatsby

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

プロジェクトの設定に関する質問がいくつか表示されます。

✔ サイトの名前を教えてください。
· your-app-name
✔ サイトを作成するフォルダーの名前を教えてください。
· your-app-name
✔ JavaScriptとTypeScriptのどちらを使用しますか？
· TypeScript
✔ CMSを使用しますか？
· 好きなのを選んでください
✔ スタイリングシステムをインストールしますか？
· Tailwind CSS
✔ その他のプラグインを使用して追加機能をインストールしますか？
· 好きなのを選んでください
✔ これを実行しますか? (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-ui initコマンドを実行します。

npx shadcn-ui@latest init

components.jsonを設定する

components.jsonの設定に関する質問がいくつか表示されます。

TypeScriptを使用しますか?(推奨): no / yes
どのスタイルを使用しますか? › デフォルト
ベースカラーとして使用したい色は? › スレート
グローバルCSSファイルはどこにありますか? › › ./src/styles/globals.css
色のCSS変数を使用しますか? › no / yes
tailwind.config.jsはどこにありますか? › tailwind.config.js
コンポーネントのインポートエイリアスを設定: › @/components
ユーティリティのインポートエイリアスを設定: › @/lib/utils
React Server Componentsを使用していますか? › no

完了

これでコンポーネントをプロジェクトに追加できます。

npx shadcn-ui@latest add button

上記のコマンドを実行すると、Buttonコンポーネントがプロジェクトに追加されます。次のようにインポートできます。

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>クリックしてください</Button>
    </div>
  )
}