Back to Home

Developer Guide

A comprehensive guide to building professional Next.js applications

Project Architecture

Directory Structure

  • src/app - Contains all pages and layouts using Next.js 13+ app directory features
  • src/components - Houses reusable UI components like buttons, cards, forms, etc.
  • src/lib - Contains utility functions, API calls, database connections, etc.
  • src/types - TypeScript type definitions and interfaces
  • src/styles - Global styles and Tailwind CSS configuration
  • public - Static assets like images, fonts, and icons

Coding Patterns

  • Atomic Design - Building components from small to large (atoms → molecules → organisms)
  • Container/Presenter - Separating logic (Container) from presentation (Presenter)
  • Custom Hooks - Reusable business logic in custom hooks (e.g., useAuth, useForm)
  • Context API - Global state management for user info, themes, etc.
  • Server Components - Performance optimization through server-side rendering

Project Setup

Initial Setup

Setup Commands
# Clone the repository
$git clone https://github.com/Salman-Ahamed/Next.js-TypeScript-Starter-Template.git

# Navigate to project directory
$cd Next.js-TypeScript-Starter-Template

# Install dependencies (Bun recommended)
$bun install

# Start development server
$bun run dev

# Build for production
$bun run build

# Start production server
$bun run start

# Clear cache and reset development environment
$bun run clear-cache

Environment Setup

Environment Variables
# Required environment variables in .env.local
$NEXT_PUBLIC_API_URL=http://localhost:3000
$NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database Configuration
$DATABASE_URL="postgresql://user:password@localhost:5432/dbname"

# Authentication
$NEXTAUTH_URL=http://localhost:3000
$NEXTAUTH_SECRET=your-secret-key

# External Services
$STRIPE_SECRET_KEY=sk_test_...
$STRIPE_WEBHOOK_SECRET=whsec_...

Development Tools

VS Code Extensions
# Essential Extensions for Development
$- ESLint - Code quality and style checking
$- Prettier - Code formatting and consistency
$- Tailwind CSS IntelliSense - Tailwind CSS suggestions
$- TypeScript and JavaScript Language Features - TypeScript support
$- GitLens - Git history and blame information
$- Error Lens - Inline error highlighting
$- Import Cost - Import size information
$- Auto Import - Automatic import suggestions
$- Path Intellisense - Path autocompletion
$- Code Spell Checker - Spelling verification

Development Workflow

Coding Process

  • Create feature branch from main (feat/, fix/, docs/)
  • Write code with TypeScript and proper type definitions
  • Write unit tests for new features
  • Run linting and formatting checks
  • Create pull request with detailed description
  • Address code review feedback
  • Merge to main after approval

Code Quality

  • Maintain clean and readable code
  • Add comments where necessary
  • Implement proper error handling
  • Optimize for performance
  • Follow security best practices
  • Increase test coverage

Testing Strategy

Testing Levels

  • Unit Tests - Testing individual functions and components
  • Integration Tests - Testing component interactions
  • E2E Tests - Testing complete user flows
  • Performance Tests - Speed and optimization checks
  • Accessibility Tests - WCAG compliance

Testing Tools

Testing Commands
# Run unit tests
$bun test

# Run E2E tests
$bun run test:e2e

# Check test coverage
$bun run test:coverage

# Run specific test file
$bun test src/components/Button.test.tsx

Performance Optimization

Key Optimizations

  • Code Splitting - Load code as needed
  • Image Optimization - WebP format, lazy loading
  • Caching - API requests, static content
  • Lazy Loading - Components, images, videos
  • Bundle Size - Remove unnecessary imports
  • Memory Leaks - Clean up unused resources

Monitoring

  • Error Tracking - Log errors with Sentry
  • Analytics - Track user behavior
  • Core Web Vitals - LCP, FID, CLS metrics
  • API Performance - Response time, error rates
  • Logging - System logs, user actions

Security Best Practices

Implementation Guidelines

  • Authentication - JWT, OAuth, session management
  • Environment Variables - Secure secret keys
  • CORS Policy - API access control
  • Content Security Policy - XSS prevention
  • Security Audits - Regular vulnerability checks
  • Dependency Updates - Security patches

Security Tools

Security Commands
# Check for vulnerabilities
$bun run security:check

# Update dependencies
$bun run update:deps

# Run security audit
$bun run audit

# Scan dependencies
$bun run scan:deps

Deployment Strategy

Deployment Process

  • CI/CD Pipeline - Automated deployment
  • Staging Environment - Testing before production
  • Feature Flags - Gradual rollout
  • Backup Strategy - Data protection
  • Deployment Metrics - Performance tracking
  • Rollback Plan - Emergency situations

Environment Management

Environment Setup
# Development Environment
$NEXT_PUBLIC_API_URL=http://localhost:3000
$NODE_ENV=development

# Staging Environment
$NEXT_PUBLIC_API_URL=https://staging-api.example.com
$NODE_ENV=staging

# Production Environment
$NEXT_PUBLIC_API_URL=https://api.example.com
$NODE_ENV=production

Documentation

Documentation Requirements

  • README Updates - Project setup, usage
  • API Documentation - Endpoints, parameters
  • Component Documentation - Props, usage
  • Deployment Procedures - Step-by-step guide
  • Changelog - Version history
  • Troubleshooting Guide - Common issues, solutions