Quick Reference

Quick reference guide for common tasks and commands.

Common Commands

Development

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run tests
npm test

# Run linter
npm run lint

# Analyze bundle
npm run analyze

Git

# Create feature branch
git checkout -b feature/name

# Commit changes
git commit -m "feat: description"

# Push branch
git push origin feature/name

# Update from main
git checkout main
git pull origin main
git checkout feature/name
git merge main

Common Code Snippets

Form Handling

import { useForm } from '@/hooks/useForm';

const { values, handleChange, handleSubmit } = useForm({
  initialValues: { email: '' },
  onSubmit: async (values) => {
    await submitForm(values);
  },
});

Data Fetching

import { useDataFetch } from '@/hooks/useDataFetch';

const { data, isLoading, error } = useDataFetch('/api/data', {
  cache: { strategy: 'cache-first', ttl: 60000 },
});

Modal

import Modal from '@/components/Modal';

const [isOpen, setIsOpen] = useState(false);

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Title">
  Content
</Modal>

Notifications

import { notifications } from '@/lib/notifications';

notifications.success('Success!', 'Operation completed');
notifications.error('Error!', 'Something went wrong');

Internationalization

import { useI18n } from '@/hooks/useI18n';

const { t, changeLocale } = useI18n();
const text = t('common.loading');

File Paths

Components

components/
  ComponentName.tsx
  UI/
    ComponentName.tsx

Hooks

hooks/
  useHookName.ts

Utilities

lib/
  utilityName.ts

Pages

app/
  page-name/
    page.tsx

Environment Variables

Required

NEXT_PUBLIC_SITE_URL=https://your-domain.com

Common Optional

NEXT_PUBLIC_ENABLE_DEV_TOOLS=true
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ANALYTICS_ID=G-XXXXXXXXXX

Import Aliases

// Components
import Component from '@/components/Component';

// Hooks
import { useHook } from '@/hooks/useHook';

// Utilities
import { utility } from '@/lib/utility';

// Types
import type { Type } from '@/types/type';

Keyboard Shortcuts

Development

• Ctrl+Shift+D: Toggle DevTools
• Ctrl+K: Focus search
• Escape: Close modals

Browser

• F5: Refresh page
• Ctrl+R: Hard refresh
• Ctrl+Shift+R: Clear cache and refresh

Common Patterns

Conditional Rendering

{condition && <Component />}
{condition ? <ComponentA /> : <ComponentB />}

Lists

{items.map((item) => (
  <div key={item.id}>{item.name}</div>
))}

Error Handling

try {
  await operation();
} catch (error) {
  console.error(error);
  notifications.error('Error', error.message);
}

Testing

Component Test

import { render, screen } from '@testing-library/react';
import Component from './Component';

test('renders component', () => {
  render(<Component />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
});

Deployment

Vercel

vercel
vercel --prod

Build Check

npm run build
npm start

Troubleshooting

Clear Cache

rm -rf .next
npm run dev

Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Resources

• Full Documentation
• API Reference
• Components Guide
• Hooks Reference