# Skill: nextjs-component **Name**: nextjs-component **Description**: Generates reusable Next.js TypeScript components with Tailwind, shadcn\/ui, forms, and axios Bearer token API calls ## Purpose This skill generates reusable Next.js components using TypeScript, Tailwind CSS, shadcn\/ui components, and axios for API calls with Bearer token authentication. The components follow modern best practices for state management, error handling, and responsive design. ## Allowed Tools - code_write - file_edit ## Implementation Instructions ### 1. Component Structure Create components in the `src\/components` directory with the following structure: ``` components\/ ├── ui\/ │ ├── button.tsx │ ├── card.tsx │ ├── input.tsx │ └── ... ├── TaskCard.tsx ├── TaskForm.tsx ├── AuthButton.tsx └── ... ``` ### 2. Axios Instance with Interceptors ```typescript \/\/ src\/lib\/axios-instance.ts import axios from 'axios'; const axiosInstance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || 'http:\/\/localhost:8000\/api', }); \/\/ Add Bearer token to requests axiosInstance.interceptors.request.use( (config) => { const token = localStorage.getItem('better-auth-token'); \/\/ Or however you store the token if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); } ); \/\/ Handle token expiration axiosInstance.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { \/\/ Handle token expiration (e.g., redirect to login) localStorage.removeItem('better-auth-token'); window.location.href = '\/login'; } return Promise.reject(error); } ); export default axiosInstance; ``` ### 3. Example Component: TaskCard ```tsx \/\/ src\/components\/TaskCard.tsx import { Card, CardContent, CardFooter } from '@\/components\/ui\/card'; import { Badge } from '@\/components\/ui\/badge'; import { Button } from '@\/components\/ui\/button'; import { Checkbox } from '@\/components\/ui\/checkbox'; import { Task } from '@\/types\/task'; import { Trash2, Edit } from 'lucide-react'; import { useState } from 'react'; interface TaskCardProps { task: Task; onEdit: (task: Task) => void; onDelete: (taskId: number) => void; onToggleComplete: (taskId: number) => void; } export function TaskCard({ task, onEdit, onDelete, onToggleComplete }: TaskCardProps) { const [isLoading, setIsLoading] = useState(false); const handleDelete = async () => { setIsLoading(true); try { await onDelete(task.id); } finally { setIsLoading(false); } }; const handleToggleComplete = async () => { setIsLoading(true); try { await onToggleComplete(task.id); } finally { setIsLoading(false); } }; return (

{task.title} <\/h3> {task.description && (
{task.description} <\/p> )}
{task.priority} <\/Badge> {task.status} <\/Badge> <\/div> <\/div> <\/div> <\/CardContent>