Expert guidance for building optimized, maintainable Next.js applications with TypeScript, React, and modern UI frameworks following clean architecture principles.
Expert AI assistant for building optimized, production-ready Next.js applications with TypeScript, React, and modern UI frameworks. Focuses on clean architecture, performance, and maintainability.
This skill guides you through building full-stack Next.js applications following industry best practices. It emphasizes:
1. **Write Clean TypeScript Code**
- Use functional and declarative programming patterns (avoid classes)
- Use descriptive variable names with auxiliary verbs (`isLoading`, `hasError`)
- Keep code concise and technical with accurate examples
- Favor iteration and modularization over duplication
2. **Follow Standardized File Structure**
```
components/tools/[tool-name]/
├── index.tsx # Main component
├── guide-section.tsx # Documentation
├── schema.ts # Zod validation
└── types.ts # TypeScript definitions
```
- Use lowercase with dashes for directories (`auth-wizard`)
- Structure files: exported components → subcomponents → helpers → static content → types
3. **Implement Standard Tool Layout**
```typescript
<ToolLayout
translationKey="tools.[tool-name]"
guideSection={<GuideSection />}
>
<MainTool />
</ToolLayout>
```
4. **Optimize React Performance**
- Minimize `'use client'`, `useEffect`, and `setState`
- Favor React Server Components (RSC) and Next.js SSR features
- Implement proper code splitting and lazy loading
5. **Implement Responsive Design**
- Use mobile-first approach with Tailwind CSS
- Optimize images (WebP format, size data, lazy loading)
- Use modern UI frameworks (Shadcn UI, Radix UI)
6. **Handle Errors Systematically**
- Use early returns and guard clauses for invalid states
- Implement custom error types:
```typescript
export class ToolError extends Error {
constructor(
message: string,
public code: string,
public context?: Record<string, any>
) {
super(message);
this.name = "ToolError";
}
}
```
7. **Validate Input with Zod**
- Define schemas in separate `schema.ts` files
- Implement proper input sanitization for security
- Handle validation errors gracefully
8. **Manage State Effectively**
- Use Zustand for global state management
- Use TanStack React Query for server state and data fetching
- Minimize client-side state when possible
9. **Structure Guide Sections**
- Include standardized tabs: Usage guide, Features, Tips & best practices
- Provide clear usage examples
- Document common pitfalls and solutions
10. **Implement Internationalization**
```json
{
"tools": {
"[tool-name]": {
"title": "Tool Name",
"guide": {
"title": "Guide",
"features": { "title": "Features" },
"tips": { "title": "Tips & Tricks" }
}
}
}
}
```
11. **Follow Security Best Practices**
- Validate all user input
- Implement proper error handling without leaking sensitive info
- Use secure coding practices (sanitization, CSP headers)
12. **Optimize Performance**
- Reduce load times with code splitting
- Implement efficient rendering strategies
- Use performance monitoring tools
13. **Write Comprehensive Tests**
- Use Jest and React Testing Library for unit tests
- Test edge cases and error conditions
- Maintain high test coverage for critical paths
14. **Document Your Code**
- Use JSDoc comments for functions and components
- Provide clear comments for complex logic
- Include README files with setup instructions
15. **Follow Structured Development Process**
- **Deep Dive Analysis**: Understand requirements and constraints
- **Planning**: Design architecture and component hierarchy
- **Implementation**: Build step-by-step following best practices
- **Review and Optimize**: Refactor and improve code quality
- **Finalization**: Verify security, performance, and requirements
- **Documentation**: Complete guides and code comments
16. **Apply System 2 Thinking**
- Break down requirements into manageable parts
- Consider each step analytically before implementation
- Evaluate multiple solutions (Tree of Thoughts approach)
- Iterate and refine before finalizing
```typescript
// components/tools/url-shortener/index.tsx
'use client';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { urlSchema, type UrlInput } from './schema';
import { ToolError } from '@/lib/errors';
export function UrlShortener() {
const [result, setResult] = useState<string | null>(null);
const { register, handleSubmit, formState: { errors } } = useForm<UrlInput>({
resolver: zodResolver(urlSchema)
});
const onSubmit = async (data: UrlInput) => {
try {
const response = await fetch('/api/shorten', {
method: 'POST',
body: JSON.stringify(data)
});
if (!response.ok) {
throw new ToolError('Failed to shorten URL', 'SHORTENER_ERROR');
}
const { shortUrl } = await response.json();
setResult(shortUrl);
} catch (error) {
console.error('Error shortening URL:', error);
}
};
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<input {...register('url')} placeholder="Enter URL" />
{errors.url && <span className="text-red-500">{errors.url.message}</span>}
<button type="submit">Shorten</button>
{result && <div>Shortened: {result}</div>}
</form>
);
}
```
```typescript
// components/tools/url-shortener/schema.ts
import { z } from 'zod';
export const urlSchema = z.object({
url: z.string()
.url('Please enter a valid URL')
.min(1, 'URL is required')
});
export type UrlInput = z.infer<typeof urlSchema>;
```
```typescript
// components/tools/url-shortener/guide-section.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
export function GuideSection() {
return (
<Tabs defaultValue="usage">
<TabsList>
<TabsTrigger value="usage">Usage</TabsTrigger>
<TabsTrigger value="features">Features</TabsTrigger>
<TabsTrigger value="tips">Tips</TabsTrigger>
</TabsList>
<TabsContent value="usage">
<h3>How to Use</h3>
<ol>
<li>Enter a long URL</li>
<li>Click "Shorten"</li>
<li>Copy your shortened link</li>
</ol>
</TabsContent>
<TabsContent value="features">
<ul>
<li>Fast URL shortening</li>
<li>Custom aliases</li>
<li>Analytics tracking</li>
</ul>
</TabsContent>
<TabsContent value="tips">
<p>Use descriptive custom aliases for better link management.</p>
</TabsContent>
</Tabs>
);
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-full-stack-development-expert/raw