Best Practices

Professional development practices to get the most out of your template.

Development Workflow

1. Use Version Control


# Initialize Git
git init
git add .
git commit -m "Initial commit"
 
# Create branches for features
git checkout -b feature/new-design

2. Make Incremental Changes

Change one thing at a time
Test after each change
Commit working code

3. Test Before Deploying


# Build locally first
npm run build
 
# Test production build
npm run start

Code Organization

File Structure

Keep organized:


your-template/
├── app/              # Pages and routes
├── components/       # Reusable components
│   ├── ui/          # Base UI components
│   └── features/    # Feature-specific
├── lib/             # Utilities and helpers
├── data/            # Mock data and constants
└── public/          # Static assets

Naming Conventions


// Components: PascalCase
Button.tsx
UserProfile.tsx
 
// Utilities: camelCase
formatDate.ts
validateEmail.ts
 
// Constants: UPPER_SNAKE_CASE
export const API_URL = '...'
export const MAX_ITEMS = 10

Performance

1. Optimize Images


import Image from 'next/image'
 
// Always use Next.js Image component
<Image
  src="/images/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // For above-fold images
/>

2. Lazy Load Components


import dynamic from 'next/dynamic'
 
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => Loading...
})

3. Use Server Components


// app/blog/page.tsx
// This is a Server Component by default
export default async function BlogPage() {
  const posts = await fetchPosts()
  return
}

Security

1. Never Commit Secrets


# .gitignore
.env*.local
.env.production

2. Validate User Input


export async function POST(request: Request) {
  const data = await request.json()
 
  // Validate before using
  if (!data.email || !isValidEmail(data.email)) {
    return Response.json({ error: 'Invalid email' }, { status: 400 })
  }
}

3. Sanitize Data


import DOMPurify from 'isomorphic-dompurify'
 
const cleanHTML = DOMPurify.sanitize(userInput)

SEO

1. Set Proper Metadata


export const metadata = {
  title: 'Page Title | Site Name',
  description: 'Descriptive text for search engines',
  openGraph: {
    title: 'Page Title',
    description: 'Description for social media',
    images: ['/images/og-image.jpg'],
  },
}

2. Use Semantic HTML


// Good
 
 
    Home
 
 
 
 
  Article Title
  Content
 
 
// Avoid
 
  Home

3. Add Alt Text to Images

Accessibility


<button
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
>
  Click Me

2. ARIA Labels


 
   {/* Icon without text */}

3. Contrast Ratios

Ensure text is readable:

Normal text: 4.5:1 ratio
Large text: 3:1 ratio
Use WebAIM Contrast Checker

Testing

Before Every Deploy

Cross-Browser Testing

Test in:

Chrome
Firefox
Safari
Edge
Mobile browsers

Documentation

Comment Complex Code


/**
 * Calculates discount based on user tier
 * @param basePrice - Original price
 * @param userTier - User's membership level
 * @returns Discounted price
 */
function calculateDiscount(basePrice: number, userTier: string) {
  // Implementation
}

Keep README Updated


# Your Template
 
## Setup
npm install
npm run dev
 
## Environment Variables
See .env.example
 
## Deployment
See docs/DEPLOYMENT.md

Common Mistakes to Avoid

1. Don’t Commit node_modules


# .gitignore
node_modules/
.next/

2. Don’t Hardcode URLs


// Bad
const apiUrl = 'http://localhost:3000/api'
 
// Good
const apiUrl = process.env.NEXT_PUBLIC_API_URL

3. Don’t Ignore TypeScript Errors


# Fix errors, don't ignore them
npm run build

4. Don’t Skip Testing

Always test:

After making changes
Before committing
Before deploying

Maintenance

Keep Dependencies Updated


# Check for updates
npm outdated
 
# Update carefully
npm update
 
# Test after updating
npm run build

Monitor Performance

Use:

Lighthouse (in Chrome DevTools)
Next.js built-in analytics
Real user monitoring

Backup Regularly


# Git backup
git push origin main
 
# File backup
tar -czf backup-$(date +%Y%m%d).tar.gz your-template/

Resources

Need help following best practices? Email: support@capricorn.engineering