Next.js 14 管理仪表盘启动器教程

Next.js 14 管理仪表盘启动器教程

next-shadcn-dashboard-starterAdmin Dashboard Starter with Nextjs14 and shadcn ui项目地址:https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter

项目目录结构及介绍

next-shadcn-dashboard-starter/
├── components/
│   ├── ui/
│   ├── cards/
│   ├── charts/
│   ├── tables/
│   └── forms/
├── config/
│   ├── auth.ts
│   ├── uploadthing.ts
│   └── zustand.ts
├── hooks/
│   └── useAuth.ts
├── pages/
│   ├── api/
│   ├── auth/
│   ├── dashboard/
│   ├── users/
│   └── index.tsx
├── public/
│   ├── images/
│   └── favicon.ico
├── styles/
│   ├── globals.css
│   └── tailwind.css
├── utils/
│   ├── validations/
│   └── helpers.ts
├── .env
├── .gitignore
├── .prettierrc
├── .eslintrc.json
├── next.config.js
├── tsconfig.json
└── package.json

目录结构说明

• components/: 包含项目中使用的所有组件，如 UI 组件、卡片、图表、表格和表单。
• config/: 包含项目的配置文件，如认证配置、文件上传配置和状态管理配置。
• hooks/: 包含自定义钩子，如认证钩子。
• pages/: 包含项目的所有页面和 API 路由。
• public/: 包含公共资源，如图片和 favicon。
• styles/: 包含全局样式和 Tailwind CSS 配置。
• utils/: 包含实用工具函数和验证逻辑。
• .env: 环境变量文件。
• .gitignore: Git 忽略文件。
• .prettierrc: Prettier 配置文件。
• .eslintrc.json: ESLint 配置文件。
• next.config.js: Next.js 配置文件。
• tsconfig.json: TypeScript 配置文件。
• package.json: 项目依赖和脚本。

项目的启动文件介绍

package.json

{
  "name": "next-shadcn-dashboard-starter",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "shadcn-ui": "latest",
    "next-auth": "latest",
    "zod": "latest",
    "react-hook-form": "latest",
    "tanstack-table": "latest",
    "uploadthing": "latest",
    "zustand": "latest"
  },
  "devDependencies": {
    "eslint": "latest",
    "prettier": "latest",
    "husky": "latest"
  }
}

启动命令

• npm run dev: 启动开发服务器。
• npm run build: 构建生产环境应用。
• npm run start: 启动生产环境服务器。
• npm run lint: 运行 ESLint 进行代码检查。

项目的配置文件介绍

next.config.js

module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true
  }
};

.env

NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_AUTH_SECRET=your-secret-key

.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "next",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

next-shadcn-dashboard-starterAdmin Dashboard Starter with Nextjs14 and shadcn ui项目地址:https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter