Building Modern UIs with React and Next.js

Introduction

React and Next.js have revolutionized the way we build modern web applications. This guide will walk you through creating beautiful, responsive user interfaces using these powerful technologies.

Prerequisites

Node.js 14.x or higher
Basic knowledge of JavaScript/TypeScript
Understanding of React fundamentals

Step 1: Project Setup

Create a new Next.js project with TypeScript:

npx create-next-app@latest my-modern-ui --typescript --tailwind --eslint

Step 2: Component Architecture

Create a reusable component structure:

// components/ui/Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC = ({
  variant = 'primary',
  size = 'md',
  children,
  onClick
}) => {
  const baseStyles = 'rounded-lg font-medium transition-all';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  };
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };

  return (
    
  );
};

Step 3: Layout Components

Create a responsive layout system:

// components/layout/Container.tsx
interface ContainerProps {
  children: React.ReactNode;
  className?: string;
}

export const Container: React.FC = ({
  children,
  className = ''
}) => {
  return (
    
      {children}
    
  );
};

// components/layout/Grid.tsx
interface GridProps {
  children: React.ReactNode;
  cols?: 1 | 2 | 3 | 4;
  gap?: 'sm' | 'md' | 'lg';
}

export const Grid: React.FC = ({
  children,
  cols = 3,
  gap = 'md'
}) => {
  const gridCols = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
  };
  const gaps = {
    sm: 'gap-4',
    md: 'gap-6',
    lg: 'gap-8'
  };

  return (
    
      {children}
    
  );
};

Step 4: Responsive Design

Implement responsive design patterns:

// components/layout/Navbar.tsx
export const Navbar: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    
      
        
          
            
          
          
          {/* Desktop Menu */}
          
            
              Home
              Features
              Pricing
            
          

          {/* Mobile Menu Button */}
          
            
          
        

        {/* Mobile Menu */}
        {isOpen && (
          
            
              Home
              Features
              Pricing
            
          
        )}
      
    
  );
};

Step 5: Animation and Transitions

Add smooth animations using Framer Motion:

// components/ui/AnimatedCard.tsx
import { motion } from 'framer-motion';

interface AnimatedCardProps {
  children: React.ReactNode;
  delay?: number;
}

export const AnimatedCard: React.FC = ({
  children,
  delay = 0
}) => {
  return (
    
      {children}
    
  );
};

Best Practices and Tips

Use CSS-in-JS or Tailwind for consistent styling
Implement proper loading states
Optimize images and assets
Follow accessibility guidelines

Advanced Features

// Custom hooks for responsive design
const useBreakpoint = () => {
  const [breakpoint, setBreakpoint] = useState<'sm' | 'md' | 'lg' | 'xl'>('sm');

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      if (width < 640) setBreakpoint('sm');
      else if (width < 768) setBreakpoint('md');
      else if (width < 1024) setBreakpoint('lg');
      else setBreakpoint('xl');
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return breakpoint;
};

// Theme provider with dark mode support
const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark';
    if (savedTheme) setTheme(savedTheme);
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    
      
        {children}
      
    
  );
};

Conclusion

Building modern UIs with React and Next.js provides a powerful foundation for creating beautiful, responsive, and performant web applications. By following these patterns and best practices, you can create user interfaces that are both visually appealing and highly functional.