Docs
Next.js

Next.js

Next.js のインストールと設定.

プロジェクトの作成

create-next-app を使用して新しい Next.js プロジェクトを作成することから始めます。

npx create-next-app@latest my-app --typescript --tailwind --eslint

CLI の実行

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

npx shadcn-ui@latest init

components.json の設定

components.json を設定するために、いくつかの 질문が求められます。

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes

フォント

私はデフォルトのフォントとして Inter を使用しています。Inter は必須ではありません。他の任意のフォントに置き換えることができます。

私が Next.js に Inter を設定する方法は次のとおりです。

1. ルートレイアウトにフォントをインポートします:

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"
 
import { cn } from "@/lib/utils"
 
const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
})
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        ...
      </body>
    </html>
  )
}

2. tailwind.config.js で theme.extend.fontFamily を設定します

const { fontFamily } = require("tailwindcss/defaultTheme")
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
}

アプリの構造

以下は Next.js アプリの構造です。参考にご利用ください。

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
  • UI コンポーネントを components/ui フォルダに配置します。
  • PageHeader や MainNav などの残りのコンポーネントは components フォルダに配置します。
  • lib フォルダには、すべてのユーティリティ関数が含まれます。私は cn ヘルパーを定義する utils.ts を持っています。
  • styles フォルダには、グローバル CSS が含まれています。

以上です

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

npx shadcn-ui@latest add button

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

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