AI导哈

Next.js 16 启动模板

这是一个基于Next.js 16、React 19、TypeScript和Tailwind CSS的生产就绪启动模板，包含丰富的UI组件、动画效果和主题系统，适用于博客、作品集和SaaS仪表盘等React应用。

  • by xevrion
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 xevrion/mcp-testing

使用说明

我的应用程序–现代Next.js 16入门版，带顺风和动画





概述

我的应用程序 是一个生产就绪的入门模板，由以下组件构建 Next.js 16, React 19, TypeScript，以及 顺风 CSS 4。它展示了一系列可重用的UI组件、流畅的动画（Framer Motion和React‑Spring）以及由 next-themes.

  • 快速、SEO友好 开箱即用的页面（Next.js 13+应用程序路由器）。
  • 零配置顺风 实用性优先的造型和 tailwind-merge 用于课堂作文。
  • 动画UI图元 –动画文本、光标发光、网格背景等。
  • 可访问的组件库 基于Radix UI原语构建。

非常适合那些希望为博客、投资组合、SaaS仪表板或任何以React为中心的web应用程序提供干净、现代基础的开发人员。

特性

功能 描述 状态
主题提供程序和切换 带有自动操作系统偏好检测的暗/亮模式。 ✅ 稳定
动画文本 打字机风格的动画标题使用 framer-motion. ✅ 稳定
光标发光 鼠标移动后的交互式光标效果。 ✅ 稳定
网格背景 英雄部分的微妙动画网格背景。 ✅ 稳定
可重用的UI图元 按钮、卡片、输入等，由Radix Slot和Tailwind构建。 ✅ 稳定
图标集 即用型图标来自 lucide-react. ✅ 稳定
响应布局 移动优先布局，灵活 layout.tsx. ✅ 稳定
实用助手 常见助手 lib/utils.ts （类名、去抖动等）。 ✅ 稳定
装订和格式化 ESLint+Next.js配置，TypeScript严格模式。 ✅ 稳定
面向未来 基于Next.js 16（应用路由器）和React 19构建。 ✅ 稳定

技术栈

类别 工具和版本
框架 Next.js 16.0.2
语言 TypeScript ^5
用户界面 反应 19.2.0，Radix UI插槽，Lucide‑React
样式 顺风CSS ^4，顺风合并，PostCSS
动画 帧运动 ^12.23.24，React‑Spring ^10.0.3
州/公用事业 clsx，类-方差-权威
主题 下一个主题 ^0.4.6
代码检查 埃斯林特 ^9，eslint配置下一步
包管理器 pnpm（存在锁文件）
部署 Vercel（一流支持）

建筑

my-app/
├─ app/                # Next.js 13+ app router (pages, layout, globals)
│   ├─ blog/           # Example blog routes (can be removed)
│   ├─ layout.tsx      # Root layout with ThemeProvider
│   └─ page.tsx        # Home page – showcases components
├─ components/         # Reusable UI components
│   ├─ animated-text.tsx
│   ├─ cursor-glow.tsx
│   ├─ grid-background.tsx
│   ├─ theme-provider.tsx
│   ├─ theme-toggle.tsx
│   └─ ui/             # Shared UI primitives (button, card, …)
├─ lib/                # Utility functions (e.g., classNames)
├─ public/             # Static assets (SVGs, favicons)
├─ styles/ (globals)   # Tailwind + global CSS
├─ next.config.ts      # Next.js configuration (future‑proof)
├─ tsconfig.json
└─ package.json
  • app/ –利用新 应用路由器 用于文件系统路由、服务器组件和布局嵌套。
  • components/ –可以在任何地方导入的纯React组件（客户端）。
  • lib/utils.ts –代码库中使用的小型辅助工具。

入门指南

先决条件

工具 最低版本
Node.js 20 （LTS）
pnpm 8 （或npm/yarn–调整命令）
Git 任何最新版本

安装

# 1️⃣ Clone the repository
git clone https://github.com/xevrion/mcp-testing.git
cd mcp-testing/my-app

# 2️⃣ Install dependencies
pnpm install   # or `npm ci` / `yarn install`

# 3️⃣ Run the development server
pnpm dev       # starts http://localhost:3000

提示： 如果你更喜欢Docker，请参阅 部署 一个现成的Dockerfile示例的部分。

配置

启动器不需要任何环境变量来进行本地开发。
如果以后添加API密钥，请创建 .env.local 项目根目录下的文件：

# Example
NEXT_PUBLIC_API_URL=https://api.example.com

这 next.config.ts 已加载 .env* 文件自动。

用法

发展

# Start dev server (hot‑reloading)
pnpm dev

# Build for production
pnpm build

# Start the production build locally
pnpm start

# Run ESLint
pnpm lint

组件展示

主页(app/page.tsx)演示了所有捆绑的组件：

import AnimatedText from '@/components/animated-text';
import CursorGlow from '@/components/cursor-glow';
import GridBackground from '@/components/grid-background';
import ThemeToggle from '@/components/theme-toggle';

export default function Home() {
  return (
    <main className="relative flex min-h-screen flex-col items-center justify-center p-8">
      <GridBackground />
      <CursorGlow />
      <AnimatedText text="Welcome to My App!" className="text-4xl font-bold" />
      <ThemeToggle className="mt-6" />
    </main>
  );
}

将代码片段复制粘贴到任何页面，以查看动画标题、光标发光和主题切换的效果。

添加新页面

在下创建新文件夹 app/ （例如。， app/about/page.tsx)并导出一个React组件。布局会自动继承主题提供程序。

// app/about/page.tsx
export default function About() {
  return (
    <section className="prose mx-auto py-12">
      <h1>About This Starter</h1>
      <p>This page was added in just a few seconds.</p>
    </section>
  );
}

发展

任务 命令
Lint代码 pnpm lint
类型检查 pnpm type-check （如果需要，添加脚本）
运行测试 （未提供测试套件-根据需要添加Jest/Mocha）
格式代码 pnpm format （如果需要，配置Prettier）

代码风格 –遵循现有的约定：TypeScript严格模式、函数式组件、Tailwind实用程序类和 class-variance-authority 用于变体处理。

部署

Vercel（推荐）

  1. 将存储库推送到GitHub。
  2. 在Vercel上导入项目-它检测 next 框架自动。
  3. 设置构建命令 pnpm build 和输出目录 .next.

码头工人

# Dockerfile (place in repo root)
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN corepack enable && pnpm install --frozen-lockfile
RUN pnpm build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.mjs ./
COPY --from=builder /app/package.json ./
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "node_modules/next/dist/bin/next", "start"]

构建并运行：

docker build -t my-app .
docker run -p 3000:3000 my-app

环境变量

通过Vercel仪表板或Docker添加任何必需的变量（例如，API密钥 -e 旗帜。

API文档

这个启动器可以 不 公开后端API。所有组件都是客户端React。延伸 app/api/ 文件夹（Next.js API路由），如果您需要无服务器端点。

贡献

我们欢迎捐款！请按照以下步骤操作：

  1. 分叉 存储库。
  2. 创建要素分支: git checkout -b feat/awesome-feature.
  3. 安装依赖项 (pnpm install).
  4. 进行更改 –保持TypeScript的严格性和ESLint规则得到满足。
  5. 运行lint: pnpm lint.
  6. 提交 一个明确的信息。
  7. 推 到你的叉子上，打开一个 拉取请求 反对 main.

行为准则

请尊重和包容。骚扰或歧视行为将不会被容忍。

故障排除和常见问题

问题 解决方案
端口3000已在使用中 终止进程(`lsof -ti:3000
顺风类不适用 确保 tailwind.config.cjs （或 tailwind.config.ts)包括 ./app/**/*.{js,ts,jsx,tsx} 路径。
缺失 pnpm 命令 全局安装pnpm： npm i -g pnpm.
动画很紧张 验证您使用的是现代浏览器，并且 prefers-reduced-motion 未设置为减少运动。
主题不持久 主题存储在 localStorage。如果怀疑值过时，请清除站点数据。

如需更多帮助，请在存储库的 讨论 选项卡。

路线图

  • []添加Jest+React测试库设置。
  • []提供 components/ui 设计系统（按钮、模型、吐司）。
  • []与无头CMS（例如Contentful）的集成示例。
  • []国际化（i18n）支持。

许可证和信用证

许可证： 麻省理工学院——见 许可证 文件。

作者 © 2024 xevrion

致谢

  • Next.js 用于生产的React框架。
  • 顺风 CSS –实用程序优先的CSS框架。
  • 帧运动 & React Spring –动画库。
  • Radix UI –可访问的图元。
  • Lucide React –开源图标。

编码愉快！

相关 MCP