Ts React Nextjs

TypeScript React Next.js Skill

Overview

This skill provides guidelines for modern React 19 and Next.js 15 development with TypeScript, focusing on Server Components, the App Router, and type-safe patterns.

Core Principles

1. TypeScript Fundamentals

// DO: Use strict TypeScript configuration
// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

// DO: Define explicit types for props
interface UserCardProps {
  user: {
    id: string;
    name: string;
    email: string;
    avatar?: string;
  };
  onSelect?: (id: string) => void;
  isLoading?: boolean;
}

// DO: Use discriminated unions for complex state
type RequestState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

function DataDisplay({ state }: { state: RequestState }) {
  switch (state.status) {
    case 'idle': return Ready to load;
    case 'loading': return ;
    case 'success': return ;
    case 'error': return ;
  }
}

2. React 19 Patterns

// DO: Use Server Components by default (no 'use client')
// app/users/page.tsx - Server Component
async function UsersPage() {
  const users = await fetchUsers(); // Direct fetch, no useEffect
  return (
    
      {users.map(user => (
        
      ))}
    
  );
}

// DO: Mark Client Components explicitly
'use client';

import { useState } from 'react';

function SearchInput({ onSearch }: { onSearch: (query: string) => void }) {
  const [query, setQuery] = useState('');
  
  return (
     setQuery(e.target.value)}
      onKeyDown={(e) => e.key === 'Enter' && onSearch(query)}
    />
  );
}

// DO: Use new React 19 'use' hook
import { use, Suspense } from 'react';

function UserProfile({ userPromise }: { userPromise: Promise }) {
  const user = use(userPromise);
  return {user.name};
}

function UserProfileWrapper() {
  return (
    }>
      
    
  );
}

3. Next.js 15 App Router Patterns

// DO: Use proper file structure
// app/
// ├── layout.tsx          # Root layout
// ├── page.tsx            # Home page
// ├── loading.tsx         # Loading UI
// ├── error.tsx           # Error boundary
// ├── not-found.tsx       # 404 page
// ├── users/
// │   ├── page.tsx        # /users
// │   ├── layout.tsx      # Users layout
// │   ├── loading.tsx     # Users loading state
// │   ├── [id]/
// │   │   ├── page.tsx    # /users/:id
// │   │   └── edit/
// │   │       └── page.tsx # /users/:id/edit
// │   └── new/
// │       └── page.tsx    # /users/new
// └── api/
//     └── users/
//         └── route.ts    # API route

// DO: Dynamic routes with type-safe params
// app/users/[id]/page.tsx
interface PageProps {
  params: Promise;
  searchParams: Promise;
}

async function UserPage({ params, searchParams }: PageProps) {
  const { id } = await params;
  const { tab } = await searchParams;
  
  const user = await fetchUser(id);
  return ;
}

// DO: API Routes
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const page = searchParams.get('page') ?? '1';
  
  const users = await fetchUsers({ page: parseInt(page) });
  return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  
  const validated = userSchema.safeParse(body);
  if (!validated.success) {
    return NextResponse.json(
      { errors: validated.error.flatten() },
      { status: 400 }
    );
  }
  
  const user = await createUser(validated.data);
  return NextResponse.json(user, { status: 201 });
}

// DO: Parallel data fetching
async function DashboardPage() {
  const [usersPromise, ordersPromise, statsPromise] = [
    fetchUsers(),
    fetchOrders(),
    fetchStats(),
  ];
  
  return (
    <>
      }>
        
      
      }>
        
      
      }>
        
      
    
  );
}

4. State Management

// DO: Server State with React Query/TanStack Query
'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
}

function useCreateUser() {
  const queryClient = useQueryClient();
  
  return useMutation({
    mutationFn: createUser,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
}

// DO: Form State with React Hook Form + Zod
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email'),
  age: z.number().min(18, 'Must be 18+').optional(),
});

type UserFormData = z.infer;

function UserForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(userSchema),
  });
  
  const createUser = useCreateUser();
  
  return (
     createUser.mutate(data))}>
      
      {errors.name && {errors.name.message}}
      
      
      {errors.email && {errors.email.message}}
      
      
      
      
        {isSubmitting ? 'Creating...' : 'Create'}
      
    
  );
}

// DO: Client State with Zustand (minimal)
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface UIState {
  sidebarOpen: boolean;
  theme: 'light' | 'dark';
  toggleSidebar: () => void;
  setTheme: (theme: 'light' | 'dark') => void;
}

const useUIStore = create()(
  devtools(
    persist(
      (set) => ({
        sidebarOpen: true,
        theme: 'light',
        toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
        setTheme: (theme) => set({ theme }),
      }),
      { name: 'ui-storage' }
    )
  )
);

5. Error Handling and Loading

// DO: Error boundaries with error.tsx
// app/users/error.tsx
'use client';

import { useEffect } from 'react';

export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error('Error:', error);
  }, [error]);
  
  return (
    
      Something went wrong!
      Try again
    
  );
}

// DO: Loading states with loading.tsx
// app/users/loading.tsx
export default function Loading() {
  return (
    
      
      
        {[1, 2, 3].map((i) => (
          
        ))}
      
    
  );
}

// DO: Not found pages
// app/users/[id]/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    
      User Not Found
      Could not find the requested user.
      Return to Users
    
  );
}

// DO: Using notFound()
import { notFound } from 'next/navigation';

async function UserPage({ params }: { params: { id: string } }) {
  const user = await fetchUser(params.id);
  
  if (!user) {
    notFound();
  }
  
  return ;
}

6. Performance Patterns

// DO: Code splitting with dynamic imports
import { Suspense, lazy } from 'react';

const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    }>
      
    
  );
}

// DO: Memoization for expensive calculations
'use client';

import { useMemo, memo } from 'react';

function ExpensiveList({ items, filter }: { items: Item[]; filter: string }) {
  const filtered = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);
  
  return (
    
      {filtered.map(item => (
        
      ))}
    
  );
}

// DO: Memoize components that receive stable props
const UserCard = memo(function UserCard({ user }: { user: User }) {
  return (
    
      {user.name}
      {user.email}
    
  );
});

When to Use

Use this skill when:

• Building React 19 applications
• Working with Next.js 15 App Router
• Setting up TypeScript configuration
• Designing component architecture
• Implementing Server Components
• Managing state (server, form, client)
• Optimizing performance

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Jonathan0823
• Source: Jonathan0823/opencode-config
• License: MIT

Install and usage instructions live in the source repository linked above.