Next.js 15: Complete Step-by-Step Guide from Setup to Production

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}

import { useState } from 'react';
import { BookForm } from './BookForm';
import { BookList } from './BookList';

interface Book {
  id: number;
  title: string;
  author: string;
  rating: number;
}

export default function App(): JSX.Element {
  const [books, setBooks] = useState<Book[]>([
    { id: 1, title: 'Next.js Guide', author: 'John Doe', rating: 5 },
    { id: 2, title: 'React Patterns', author: 'Jane Smith', rating: 4 }
  ]);

  const addBook = (book: Book) => {
    setBooks(prev => [...prev, book]);
  };

  return (
    <div style={{ 
      maxWidth: '600px', 
      margin: '20px auto', 
      padding: '20px',
      fontFamily: 'system-ui, sans-serif'
    }}>
      <h1 style={{ 
        textAlign: 'center', 
        marginBottom: '30px',
        color: '#1f2937'
      }}>
        📚 Book Collection Manager
      </h1>
      
      <div style={{
        backgroundColor: '#f8fafc',
        padding: '20px',
        borderRadius: '12px',
        border: '1px solid #e2e8f0',
        marginBottom: '30px'
      }}>
        <h2 style={{ marginBottom: '16px', color: '#374151' }}>
          Add New Book
        </h2>
        <BookForm onAddBook={addBook} />
      </div>
      
      <div>
        <h2 style={{ marginBottom: '16px', color: '#374151' }}>
          Your Books ({books.length})
        </h2>
        <BookList books={books} />
      </div>
      
      <div style={{
        marginTop: '24px',
        padding: '16px',
        backgroundColor: '#dbeafe',
        borderRadius: '8px',
        fontSize: '14px',
        color: '#1e40af'
      }}>
        💡 <strong>useActionState Demo:</strong> This showcases form handling patterns 
        similar to Next.js Server Actions with client-side state management!
      </div>
    </div>
  );
}

import { useState, useOptimistic, useTransition } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
  createdAt: string;
  isOptimistic?: boolean;
}

type OptimisticAction = 
  | { type: 'add'; tempId: number; text: string }
  | { type: 'toggle'; id: number }
  | { type: 'delete'; id: number };

// Simulate async operations
const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));

const mockApi = {
  async addTodo(text: string): Promise<Todo> {
    await delay(1000);
    return {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date().toISOString()
    };
  },
  
  async toggleTodo(id: number): Promise<{ success: boolean }> {
    await delay(500);
    return { success: true };
  },
  
  async deleteTodo(id: number): Promise<{ success: boolean }> {
    await delay(500);
    return { success: true };
  }
};

export default function OptimisticTodoApp(): JSX.Element {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: 'Try the optimistic updates', completed: false, createdAt: '2024-01-01' },
    { id: 2, text: 'Notice instant UI feedback', completed: true, createdAt: '2024-01-01' }
  ]);
  
  const [isPending, startTransition] = useTransition();
  const [newTodoText, setNewTodoText] = useState<string>('');
  
  // Optimistic state management
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state: Todo[], action: OptimisticAction): Todo[] => {
      switch (action.type) {
        case 'add':
          return [...state, {
            id: action.tempId,
            text: action.text,
            completed: false,
            createdAt: new Date().toISOString(),
            isOptimistic: true
          }];
          
        case 'toggle':
          return state.map(todo =>
            todo.id === action.id
              ? { ...todo, completed: !todo.completed }
              : todo
          );
          
        case 'delete':
          return state.filter(todo => todo.id !== action.id);
          
        default:
          return state;
      }
    }
  );
  
  const handleAddTodo = async () => {
    if (!newTodoText.trim()) return;
    
    const tempId = Date.now();
    const text = newTodoText;
    setNewTodoText('');
    
    startTransition(async () => {
      // Optimistic update
      addOptimisticTodo({ type: 'add', tempId, text });
      
      try {
        // Real API call
        const newTodo = await mockApi.addTodo(text);
        setTodos(prev => [...prev, newTodo]);
      } catch (error) {
        // In real app, you'd handle rollback here
        console.error('Failed to add todo:', error);
      }
    });
  };
  
  const handleToggle = (id: number): void => {
    startTransition(async () => {
      // Optimistic update
      addOptimisticTodo({ type: 'toggle', id });
      
      try {
        await mockApi.toggleTodo(id);
        setTodos(prev => prev.map(todo =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
      } catch (error) {
        console.error('Failed to toggle todo:', error);
      }
    });
  };
  
  const handleDelete = (id: number): void => {
    startTransition(async () => {
      // Optimistic update
      addOptimisticTodo({ type: 'delete', id });
      
      try {
        await mockApi.deleteTodo(id);
        setTodos(prev => prev.filter(todo => todo.id !== id));
      } catch (error) {
        console.error('Failed to delete todo:', error);
      }
    });
  };
  
  return (
    <div style={{
      maxWidth: '500px',
      margin: '20px auto',
      padding: '20px',
      fontFamily: 'system-ui, sans-serif',
      backgroundColor: '#f9fafb',
      borderRadius: '12px',
      border: '1px solid #e5e7eb'
    }}>
      <h2 style={{ 
        marginBottom: '24px', 
        color: '#1f2937',
        textAlign: 'center' 
      }}>
        🚀 Optimistic UI Demo
      </h2>
      
      {/* Add Todo Form */}
      <div style={{ 
        display: 'flex', 
        gap: '10px', 
        marginBottom: '20px' 
      }}>
        <input
          type="text"
          value={newTodoText}
          onChange={(e) => setNewTodoText(e.target.value)}
          placeholder="Add a new todo..."
          onKeyPress={(e) => e.key === 'Enter' && handleAddTodo()}
          style={{
            flex: 1,
            padding: '12px',
            border: '2px solid #e5e7eb',
            borderRadius: '8px',
            fontSize: '16px',
            outline: 'none'
          }}
        />
        <button
          onClick={handleAddTodo}
          disabled={!newTodoText.trim()}
          style={{
            padding: '12px 20px',
            backgroundColor: newTodoText.trim() ? '#3b82f6' : '#9ca3af',
            color: 'white',
            border: 'none',
            borderRadius: '8px',
            cursor: newTodoText.trim() ? 'pointer' : 'not-allowed',
            fontSize: '16px',
            fontWeight: '500'
          }}
        >
          Add
        </button>
      </div>
      
      {/* Loading Indicator */}
      {isPending && (
        <div style={{
          textAlign: 'center',
          padding: '10px',
          backgroundColor: '#dbeafe',
          border: '1px solid #93c5fd',
          borderRadius: '6px',
          marginBottom: '16px',
          color: '#1e40af'
        }}>
          ⚡ Processing... (Notice the instant UI updates!)
        </div>
      )}
      
      {/* Todo List */}
      <div style={{ space: '8px' }}>
        {optimisticTodos.map((todo) => (
          <div
            key={todo.id}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              padding: '16px',
              backgroundColor: 'white',
              border: '1px solid #e5e7eb',
              borderRadius: '8px',
              marginBottom: '8px',
              opacity: todo.isOptimistic ? 0.7 : 1,
              transition: 'opacity 0.2s'
            }}
          >
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggle(todo.id)}
              style={{ 
                width: '18px', 
                height: '18px',
                cursor: 'pointer'
              }}
            />
            
            <span
              style={{
                flex: 1,
                textDecoration: todo.completed ? 'line-through' : 'none',
                color: todo.completed ? '#6b7280' : '#1f2937',
                fontSize: '16px'
              }}
            >
              {todo.text}
            </span>
            
            {todo.isOptimistic && (
              <span style={{
                fontSize: '12px',
                color: '#3b82f6',
                backgroundColor: '#dbeafe',
                padding: '2px 6px',
                borderRadius: '4px'
              }}>
                Saving...
              </span>
            )}
            
            <button
              onClick={() => handleDelete(todo.id)}
              style={{
                padding: '6px 12px',
                backgroundColor: '#ef4444',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer',
                fontSize: '14px'
              }}
            >
              Delete
            </button>
          </div>
        ))}
        
        {optimisticTodos.length === 0 && (
          <div style={{
            textAlign: 'center',
            padding: '40px',
            color: '#6b7280',
            fontStyle: 'italic'
          }}>
            No todos yet. Add one above!
          </div>
        )}
      </div>
      
      <div style={{
        marginTop: '16px',
        padding: '12px',
        backgroundColor: '#f3f4f6',
        borderRadius: '6px',
        fontSize: '14px',
        color: '#4b5563'
      }}>
        💡 <strong>Try it:</strong> Add, toggle, or delete todos. Notice how the UI updates instantly 
        even though there's a simulated network delay!
      </div>
    </div>
  );
}

import { useState, useOptimistic, useTransition, useActionState } from 'react';

interface Task {
  id: number;
  title: string;
  priority: 'low' | 'medium' | 'high';
  completed: boolean;
  createdAt: string;
  isOptimistic?: boolean;
}

interface TaskFormState {
  success: boolean;
  error: string | null;
}

type OptimisticAction = 
  | { type: 'add'; task: Task }
  | { type: 'toggle'; id: number }
  | { type: 'delete'; id: number };

// Mock API functions (simulate server actions)
const mockApi = {
  async createTask(formData: FormData): Promise<Task> {
    await new Promise(resolve => setTimeout(resolve, 800));
    const title = formData.get('title') as string;
    const priority = (formData.get('priority') as Task['priority']) || 'medium';
    
    if (!title || title.trim().length < 3) {
      throw new Error('Task title must be at least 3 characters');
    }
    
    return {
      id: Date.now(),
      title: title.trim(),
      priority,
      completed: false,
      createdAt: new Date().toISOString()
    };
  },
  
  async toggleTask(id: number): Promise<{ success: boolean }> {
    await new Promise(resolve => setTimeout(resolve, 400));
    return { success: true };
  },
  
  async deleteTask(id: number): Promise<{ success: boolean }> {
    await new Promise(resolve => setTimeout(resolve, 600));
    return { success: true };
  }
};

// Task Form Component with useActionState
interface TaskFormProps {
  onTaskAdded: (task: Task) => void;
}

function TaskForm({ onTaskAdded }: TaskFormProps): JSX.Element {
  const [isPending, startTransition] = useTransition();
  
  const submitTask = async (prevState: TaskFormState, formData: FormData): Promise<TaskFormState> => {
    try {
      const newTask = await mockApi.createTask(formData);
      onTaskAdded(newTask);
      return { success: true, error: null };
    } catch (error) {
      return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
    }
  };
  
  const [state, formAction] = useActionState(submitTask, { success: false, error: null });
  
  return (
    <div style={{ 
      backgroundColor: '#f8fafc', 
      padding: '20px', 
      borderRadius: '12px',
      border: '1px solid #e2e8f0',
      marginBottom: '24px'
    }}>
      <h3 style={{ 
        margin: '0 0 16px 0', 
        color: '#1e293b',
        fontSize: '18px',
        fontWeight: '600'
      }}>
        ✨ Add New Task
      </h3>
      
      <form action={formAction} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        <input
          name="title"
          type="text"
          placeholder="What needs to be done?"
          style={{
            padding: '12px',
            border: '2px solid #e2e8f0',
            borderRadius: '8px',
            fontSize: '16px',
            outline: 'none',
            transition: 'border-color 0.2s'
          }}
          onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
          onBlur={(e) => e.target.style.borderColor = '#e2e8f0'}
        />
        
        <select
          name="priority"
          style={{
            padding: '12px',
            border: '2px solid #e2e8f0',
            borderRadius: '8px',
            fontSize: '16px',
            outline: 'none'
          }}
        >
          <option value="low">🟢 Low Priority</option>
          <option value="medium">🟡 Medium Priority</option>
          <option value="high">🔴 High Priority</option>
        </select>
        
        <button
          type="submit"
          disabled={isPending}
          style={{
            padding: '12px 20px',
            backgroundColor: isPending ? '#94a3b8' : '#3b82f6',
            color: 'white',
            border: 'none',
            borderRadius: '8px',
            fontSize: '16px',
            fontWeight: '500',
            cursor: isPending ? 'not-allowed' : 'pointer',
            transition: 'all 0.2s'
          }}
        >
          {isPending ? '⏳ Adding Task...' : '➕ Add Task'}
        </button>
        
        {state.error && (
          <div style={{
            padding: '12px',
            backgroundColor: '#fee2e2',
            border: '1px solid #fecaca',
            borderRadius: '6px',
            color: '#dc2626',
            fontSize: '14px'
          }}>
            ❌ {state.error}
          </div>
        )}
      </form>
    </div>
  );
}

// Task Item Component
interface TaskItemProps {
  task: Task;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
  isOptimistic?: boolean;
}

function TaskItem({ task, onToggle, onDelete, isOptimistic }: TaskItemProps): JSX.Element {
  const getPriorityColor = (priority: Task['priority']): string => {
    switch (priority) {
      case 'high': return '#ef4444';
      case 'medium': return '#f59e0b';
      case 'low': return '#10b981';
      default: return '#6b7280';
    }
  };
  
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '12px',
      padding: '16px',
      backgroundColor: 'white',
      border: '1px solid #e5e7eb',
      borderRadius: '8px',
      marginBottom: '8px',
      opacity: isOptimistic ? 0.7 : 1,
      transition: 'all 0.3s',
      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
    }}>
      <input
        type="checkbox"
        checked={task.completed}
        onChange={() => onToggle(task.id)}
        style={{ 
          width: '18px', 
          height: '18px',
          cursor: 'pointer',
          accentColor: '#3b82f6'
        }}
      />
      
      <div style={{
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        backgroundColor: getPriorityColor(task.priority),
        flexShrink: 0
      }} />
      
      <div style={{ flex: 1 }}>
        <div style={{
          textDecoration: task.completed ? 'line-through' : 'none',
          color: task.completed ? '#6b7280' : '#1f2937',
          fontSize: '16px',
          fontWeight: '500'
        }}>
          {task.title}
        </div>
        <div style={{
          fontSize: '12px',
          color: '#6b7280',
          marginTop: '2px'
        }}>
          {task.priority.toUpperCase()} • Created {new Date(task.createdAt).toLocaleString()}
        </div>
      </div>
      
      {isOptimistic && (
        <span style={{
          fontSize: '12px',
          color: '#3b82f6',
          backgroundColor: '#dbeafe',
          padding: '4px 8px',
          borderRadius: '4px'
        }}>
          Saving...
        </span>
      )}
      
      <button
        onClick={() => onDelete(task.id)}
        style={{
          padding: '8px',
          backgroundColor: '#fef2f2',
          color: '#dc2626',
          border: '1px solid #fecaca',
          borderRadius: '6px',
          cursor: 'pointer',
          fontSize: '14px',
          transition: 'all 0.2s'
        }}
        onMouseEnter={(e) => {
          e.target.style.backgroundColor = '#fee2e2';
        }}
        onMouseLeave={(e) => {
          e.target.style.backgroundColor = '#fef2f2';
        }}
      >
        🗑️
      </button>
    </div>
  );
}

// Main TaskFlow App
export default function TaskFlowApp(): JSX.Element {
  const [tasks, setTasks] = useState<Task[]>([
    {
      id: 1,
      title: 'Learn Next.js 15 App Router',
      priority: 'high',
      completed: true,
      createdAt: new Date(Date.now() - 86400000).toISOString()
    },
    {
      id: 2,
      title: 'Master React 19 Hooks',
      priority: 'medium',
      completed: false,
      createdAt: new Date(Date.now() - 43200000).toISOString()
    },
    {
      id: 3,
      title: 'Deploy to Production',
      priority: 'low',
      completed: false,
      createdAt: new Date().toISOString()
    }
  ]);
  
  const [isPending, startTransition] = useTransition();
  
  // Optimistic updates with useOptimistic
  const [optimisticTasks, addOptimisticTask] = useOptimistic(
    tasks,
    (state: Task[], action: OptimisticAction): Task[] => {
      switch (action.type) {
        case 'add':
          return [...state, { ...action.task, isOptimistic: true }];
        case 'toggle':
          return state.map(task =>
            task.id === action.id 
              ? { ...task, completed: !task.completed, isOptimistic: true }
              : task
          );
        case 'delete':
          return state.filter(task => task.id !== action.id);
        default:
          return state;
      }
    }
  );
  
  const handleTaskAdded = (newTask: Task): void => {
    startTransition(() => {
      addOptimisticTask({ type: 'add', task: newTask });
      setTasks(prev => [...prev, newTask]);
    });
  };
  
  const handleToggle = (id: number): void => {
    startTransition(async () => {
      addOptimisticTask({ type: 'toggle', id });
      try {
        await mockApi.toggleTask(id);
        setTasks(prev => prev.map(task =>
          task.id === id ? { ...task, completed: !task.completed } : task
        ));
      } catch (error) {
        console.error('Failed to toggle task:', error);
      }
    });
  };
  
  const handleDelete = (id: number): void => {
    startTransition(async () => {
      addOptimisticTask({ type: 'delete', id });
      try {
        await mockApi.deleteTask(id);
        setTasks(prev => prev.filter(task => task.id !== id));
      } catch (error) {
        console.error('Failed to delete task:', error);
      }
    });
  };
  
  const completedCount = optimisticTasks.filter(task => task.completed).length;
  const totalCount = optimisticTasks.length;
  
  return (
    <div style={{ 
      maxWidth: '600px', 
      margin: '20px auto', 
      padding: '24px',
      fontFamily: 'system-ui, -apple-system, sans-serif',
      backgroundColor: '#ffffff',
      minHeight: '100vh'
    }}>
      {/* Header */}
      <div style={{ 
        textAlign: 'center', 
        marginBottom: '32px',
        padding: '24px',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderRadius: '16px',
        color: 'white'
      }}>
        <h1 style={{ 
          margin: '0 0 8px 0', 
          fontSize: '32px',
          fontWeight: '700'
        }}>
          🚀 TaskFlow
        </h1>
        <p style={{ 
          margin: 0, 
          fontSize: '18px',
          opacity: 0.9
        }}>
          Next.js 15 + React 19 Task Manager
        </p>
        <div style={{
          marginTop: '12px',
          fontSize: '16px',
          fontWeight: '500'
        }}>
          {completedCount} of {totalCount} tasks completed
        </div>
      </div>
      
      {/* Add Task Form */}
      <TaskForm onTaskAdded={handleTaskAdded} />
      
      {/* Loading State */}
      {isPending && (
        <div style={{
          textAlign: 'center',
          padding: '12px',
          backgroundColor: '#dbeafe',
          border: '1px solid #93c5fd',
          borderRadius: '8px',
          marginBottom: '16px',
          color: '#1e40af'
        }}>
          ⚡ Processing your request...
        </div>
      )}
      
      {/* Task List */}
      <div style={{ marginBottom: '24px' }}>
        <h3 style={{ 
          margin: '0 0 16px 0',
          color: '#1e293b',
          fontSize: '20px',
          fontWeight: '600'
        }}>
          📋 Your Tasks ({totalCount})
        </h3>
        
        {optimisticTasks.length === 0 ? (
          <div style={{
            textAlign: 'center',
            padding: '48px',
            backgroundColor: '#f8fafc',
            borderRadius: '12px',
            color: '#64748b',
            fontSize: '16px'
          }}>
            🎉 No tasks yet! Add one above to get started.
          </div>
        ) : (
          <div>
            {optimisticTasks.map((task) => (
              <TaskItem
                key={task.id}
                task={task}
                onToggle={handleToggle}
                onDelete={handleDelete}
                isOptimistic={task.isOptimistic}
              />
            ))}
          </div>
        )}
      </div>
      
      {/* Footer */}
      <div style={{
        padding: '20px',
        backgroundColor: '#f1f5f9',
        borderRadius: '12px',
        textAlign: 'center',
        color: '#475569',
        fontSize: '14px'
      }}>
        <div style={{ fontWeight: '600', marginBottom: '8px' }}>
          🎯 Features Demonstrated:
        </div>
        <div>
          ✅ useActionState • ✅ useOptimistic • ✅ Server Actions • ✅ Optimistic UI • ✅ Form Handling
        </div>
        <div style={{ marginTop: '8px', fontStyle: 'italic' }}>
          Try modifying the code to add your own features!
        </div>
      </div>
    </div>
  );
}