Back to Details

base-app-setup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Base App Setup

基础应用搭建

Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.
包含Shadcn UI、Neon Postgres、Drizzle ORM和AI SDK的Next.js应用完整搭建指南

Cookbook - Complete These Recipes in Order

操作手册 - 按顺序完成以下步骤

Next.js on Vercel

Next.js on Vercel

Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
创建一个基于Bun运行的Next.js应用，配置开发环境，并部署到Vercel，实现推送代码时自动部署。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel

Editor and Linting Setup

编辑器与代码规范配置

Configure Prettier for code formatting and TypeScript for typechecking. Includes VSCode settings and EditorConfig for consistent code style. Skips ESLint/Biome to avoid config complexity.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-style-setup
配置Prettier进行代码格式化，TypeScript进行类型检查。包含VSCode设置和EditorConfig，以保持一致的代码风格。跳过ESLint/Biome以避免配置复杂度。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-style-setup

AI Coding Agent Configuration

AI编码Agent配置

Configure AI coding agents like Cursor, GitHub Copilot, or Claude Code with project-specific patterns, coding guidelines, and MCP servers for consistent AI-assisted development.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/agent-setup
为Cursor、GitHub Copilot或Claude Code等AI编码Agent配置项目特定的模式、编码规范和MCP服务器，以实现一致的AI辅助开发。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/agent-setup

Shadcn UI & Theming

Shadcn UI 与主题配置

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
使用next-themes添加支持深色模式的Shadcn UI组件。包含主题提供器和CSS变量配置。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup

Assertion Helper

断言工具函数

TypeScript assertion function for runtime type narrowing with descriptive error messages. Based on tiny-invariant.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/assert
用于运行时类型收窄的TypeScript断言函数，带有描述性错误信息。基于tiny-invariant实现。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/assert

Type-Safe Environment Configuration

类型安全的环境配置

Type-safe environment variable validation using Zod with a Drizzle-like schema API. Supports server/public fields, feature flags, either-or constraints, and client-side protection.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
使用Zod实现类型安全的环境变量验证，采用类似Drizzle的Schema API。支持服务器/公共字段、功能标志、二选一约束和客户端保护。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup

Build-Time Environment Variable Validation

构建时环境变量验证

Validate environment variables on server start and before builds. Catch missing or invalid variables early with clear error messages.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/env-validation
在服务器启动时和构建前验证环境变量。通过清晰的错误信息提前捕获缺失或无效的变量。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/env-validation

Neon + Drizzle Setup

Neon + Drizzle 配置

Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
使用Drizzle ORM将Next.js应用连接到Neon Postgres，并针对Vercel无服务器函数优化连接池。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup

AI SDK & Simple Chat

AI SDK 与简易聊天功能

Install the Vercel AI SDK with AI Elements components. Build a streaming chat interface with the useChat hook.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup
安装带有AI Elements组件的Vercel AI SDK。使用useChat钩子构建流式聊天界面。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup

Working with Drizzle

Drizzle 使用指南

Write type-safe database queries with Drizzle ORM. Covers select, insert, update, delete, relational queries, and adding new tables.
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-drizzle-queries
使用Drizzle ORM编写类型安全的数据库查询。涵盖查询、插入、更新、删除、关联查询以及添加新表。
bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-drizzle-queries