MvpFast-快速构建网站应用

MvpFast 使用以下主要技术：

Next.js - React 框架
Tailwind CSS - 实用优先的 CSS 框架
Prisma - 下一代 ORM
NextAuth.js - 身份认证解决方案
DaisyUI - Tailwind CSS 组件库
MongoDB Atlas - 数据库
Vercel - 云平台
GitHub - 代码托管平台
微信开发 - 公众号开发

MvpFast 里面还包含了很多的组件文件，它们可以帮助你快速的构建自己想要的内容。

在/components文件夹里面你可以找到你需要的组件，包括但不限于 Hero、Price 等等组件，你可以看文档的components 部分。

根布局组件在src/app/layout.tsx，它是整个网站的最根部的布局组件，包含一些网站监听，数据传输，主题选择等等功能，你也可以通过metadata来做你的seo修改。

tsx

1import type { Metadata } from 'next';
2import { Inter } from 'next/font/google';
3import localFont from 'next/font/local';
4import { cn } from '@/lib/utils';
5import dynamic from 'next/dynamic';
6import './globals.css';
7import { ReduxProvider } from '@/store';
8import { Toaster } from 'react-hot-toast';
9import Script from 'next/script';
10import { Analytics } from '@vercel/analytics/react';
11import { SessionProvider } from 'next-auth/react';
12import { ThemeProviders } from '@/components/theme/ThemeProvider';
13import { SpeedInsights } from '@vercel/speed-insights/next';
14const PageProgressBar = dynamic(() => import('@/components/PageProgressBar'), {
15  ssr: false,
16});
17
18const inter = Inter({ subsets: ['latin'] });
19
20const fonts = localFont({
21  src: [
22    {
23      path: '../../public/fonts/xft.ttf',
24    },
25  ],
26  variable: '--font-xft',
27});
28
29export const metadata: Metadata = {
30  title: 'MvpFast-快速构建网站应用',
31  description:
32    '这是一款能帮助你快速构建个人网站的应用，使用最新的前端技术栈，集成登录、鉴权、手机、邮箱、数据库、博客、文章、支付等等网站所需要的功能，你只需要花几个小时开发你的核心功能就可以上线，一次购买，永久拥有',
33  keywords:
34    '开发模板 快速开发 NextJs React TailWindCss Mongdb Atlas wechat 微信体系 永久拥有 快速构建 NextAuth 网站开发 Saas模板 微信登录',
35};
36
37export default function RootLayout({
38  children,
39}: Readonly<{
40  children: React.ReactNode;
41}>) {
42  return (
43    <html lang="zh">
44      <body className={cn(fonts.variable, inter.className)}>
45        <PageProgressBar />
46        <ThemeProviders attribute="data-theme" defaultTheme="light">
47          <SessionProvider>
48            <ReduxProvider>{children}</ReduxProvider>
49          </SessionProvider>
50        </ThemeProviders>
51        <Toaster></Toaster>
52        <Analytics></Analytics>
53        <SpeedInsights></SpeedInsights>
54        <Script
55          strategy="lazyOnload"
56          src={`https://www.googletagmanager.com/gtag/js?id=xxx`}
57        />
58        <Script id="ga-script" strategy="lazyOnload">
59          {`
60            window.dataLayer = window.dataLayer || [];
61            function gtag(){window.dataLayer.push(arguments);}
62            gtag('js', new Date());
63            gtag('config', 'xxx');
64          `}
65        </Script>
66      </body>
67    </html>
68  );
69}

了解