LogoLandingMore

快速开始

快速开始使用本产品的完整指南

快速开始

欢迎使用本产品！本指南将帮助您快速上手。

环境要求

在开始之前，请确保您的开发环境满足以下要求：

  • Node.js 18.0 或更高版本
  • npm 或 pnpm 包管理器
  • Git 版本控制

安装

npm install

运行项目

安装完成后，运行以下命令启动开发服务器：

pnpm run dev
开发服务器默认在 http://localhost:3000 运行

下一步

现在您已经成功运行了项目，接下来可以：

使用指南

了解产品的基本使用方法

开发教程

学习如何自定义和扩展功能

功能特性

探索产品的核心功能

定制化修改

修改网站配色

1、选择一个 shadcn 主题调试器

2、为你的项目调制一套主题配色：

3、粘贴主题样式到项目根目录文件：theme.css

4、重新进入项目预览页面，即可看到你定制的主题

修改配置内容

开发环境的配置文件是：.env.development，线上环境的配置文件是：.env.production

请根据项目实际情况，配置这两个文件的内容。配置参考：

  • 数据库配置
  • 登录鉴权
  • 数据统计
  • 支付
  • 文件存储
# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_SITE_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "Template"
NEXT_PUBLIC_SITE_EMAIL = "support@codekv.com"
 
# -----------------------------------------------------------------------------
# Auth with better-auth
# https://www.better-auth.com/
# Set your Auth URL and Secret
# Secret can be generated with `openssl rand -base64 32`
# -----------------------------------------------------------------------------
BETTER_AUTH_SECRET = ""
 
# -----------------------------------------------------------------------------
# Google Auth
# https://authjs.dev/getting-started/providers/google
# -----------------------------------------------------------------------------
GOOGLE_CLIENT_ID = ""
GOOGLE_CLIENT_SECRET = ""
 
# -----------------------------------------------------------------------------
# Github Auth
# https://authjs.dev/getting-started/providers/github
# -----------------------------------------------------------------------------
GITHUB_CLIENT_ID = ""
GITHUB_CLIENT_SECRET = ""
 
# -----------------------------------------------------------------------------
# Resend
# https://resend.com/
# -----------------------------------------------------------------------------
RESEND_API_KEY = ""
 
# -----------------------------------------------------------------------------
# Payment with Stripe
# Get your API keys from https://dashboard.stripe.com/apikeys
# -----------------------------------------------------------------------------
STRIPE_SECRET_KEY = ""
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = ""
 
# -----------------------------------------------------------------------------
# Turnstile
# https://www.cloudflare.com/application-services/products/turnstile/
# -----------------------------------------------------------------------------
TURNSTILE_SECRET_KEY = ""
NEXT_PUBLIC_TURNSTILE_SITE_KEY = ""

文档与资源

Showcase (开源主题与模板)

  • Awesome Mantine（社区维护可参考）：https://github.com/xiaohanyu/awesome-mantine.

  • docmost - An open-source alternative to Confluence and Notion.

  • homarr - A simple, yet powerful dashboard for your server

  • KamousAI - Language Learning Tools, uplevel your language skills with AI

  • local-weather - A weather app using Next.js, Mantine, Edge API Routes, and the OpenWeatherMap and Google Maps API's

  • mantine-analytics-dashboard - A free, open source, Next 14, React 18 admin dashboard template created using Mantine 7

  • Mantine Extensions - Hub of extensions designed to enhance the functionality and aesthetics of the Mantine UI library

  • MantineHub - A tool to easily add modern, pre-configured themes (inspired by Shadcn) to your Mantine projects

  • Mantine Tweaker - A mantine theme tweaker

  • moonlit - React music player with customizable experience

  • ryot - A self hosted platform for tracking various facets of your life - media, fitness etc

  • Titanium - Landing page blocks using Mantine

  • UptimeFlare - Free and serverless uptime monitoring / status page on Cloudflare Workers, with Geo-specific checks

数据库和鉴权认证概览

数据库和鉴权认证模块

On this page