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：

希望使用哪种样式？ › 默认
希望哪种颜色作为基础色？ › 石板色
是否希望使用 CSS 变量表示颜色？ › 否 / 是

字体

我使用 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 文件夹包含所有实用函数。我有一个 utils.ts，在其中定义 cn 帮助器。
  • styles 文件夹包含全局 CSS。

就是这些

你现在可以开始向你的项目中添加组件了。

npx shadcn-ui@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后你可以这样导入它：

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