## Usage Examples ### Creating a New Page ```typescript // src/app/about/page.tsx import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'About Us', description: 'Learn more about our company', }; export default function AboutPage() { return (

About Us

Welcome to our platform...

); } ``` ### Creating a Component ```typescript // src/components/shared/FeatureCard.tsx import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; interface FeatureCardProps { title: string; description: string; icon?: React.ReactNode; } export function FeatureCard({ title, description, icon }: FeatureCardProps) { return (

{icon} {title}

{description}

); } ``` ### API Route Example ```typescript // src/app/api/users/route.ts import { NextResponse } from 'next/server'; export async function GET() { // Fetch users from database const users = await db.user.findMany(); return NextResponse.json(users); } export async function POST(request: Request) { const data = await request.json(); // Create user const user = await db.user.create({ data }); return NextResponse.json(user, { status: 201 }); } ``` ### Environment Variable Usage ```typescript // src/lib/env.ts import { z } from 'zod'; const envSchema = z.object({ NEXT_PUBLIC_SITE_URL: z.string().url(), DATABASE_URL: z.string(), API_KEY: z.string(), }); export const env = envSchema.parse(process.env); // Usage in components import { env } from '@/lib/env'; const apiUrl = env.NEXT_PUBLIC_SITE_URL; ```

Browse Registry

Next.js Starter Template

Next.js Starter Template