メニュー
Optimize React components for performance following Next.js 15 and project best practices
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/kwkraus/my-dashboard --skill optimize-react-componentコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | optimize-react-component |
| description | Optimize React components for performance following Next.js 15 and project best practices |
When optimizing React components in this Next.js 15 dashboard:
Choose the right component type:
Minimize client-side JavaScript:
// Good: Server Component (default)
export default function StaticContent() {
return <div>Content</div>;
}
// Use client only when necessary
"use client";
export default function InteractiveContent() {
const [state, setState] = useState(false);
return < = => setState(!state)}>Content;
}
Optimize re-renders with React.memo and useMemo:
import { memo, useMemo } from "react";
// Memoize expensive computations
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
return data.map(item => expensiveOperation(item));
}, [data]);
return <div>{processedData}</div>;
});
Use dynamic imports for large components:
import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import("@/components/HeavyChart"), {
loading: () => <p>Loading chart...</p>,
ssr: false // Disable SSR if component uses browser APIs
});
Optimize images with next/image:
import Image from "next/image";
<Image
src="/image.png"
alt="Description"
width={500}
height={300}
priority // For above-the-fold images
/>
Prevent unnecessary effect executions:
// Include all dependencies
useEffect(() => {
fetchData(id);
}, [id]); // Specify dependencies
// Cleanup side effects
useEffect(() => {
const subscription = subscribe();
return () => subscription.unsubscribe();
}, []);
Type safety for better performance:
any typeComponent splitting:
Leverage Turbopack (Next.js 15):
npm run dev which automatically uses Turbopack// Before (unnecessarily client-side)
"use client";
export default function StaticCard() {
return <Card>Static Content</Card>;
}
// After (server component)
export default function StaticCard() {
return <Card>Static Content</Card>;
}
"use client";
import { memo, useMemo } from "react";
import { LineChart, Line } from "recharts";
export const OptimizedChart = memo(function OptimizedChart({ data }) {
const colors = useChartColors();
// Memoize processed data
const chartData = useMemo(() => {
return data.map(item => ({
name: item.label,
value: item.total
}));
}, [data]);
return (
<LineChart data={chartData}>
<Line dataKey="value" stroke={colors.chart1} />
</LineChart>
);
});
// Before: One large component
export default function Dashboard() {
return (
<div>
<Header />
<Stats />
<Charts />
<Footer />
</div>
);
}
// After: Split into smaller, focused components
export default function Dashboard() {
return (
<div>
<DashboardHeader />
<DashboardStats />
<DashboardCharts />
<DashboardFooter />
</div>
);
}
// Each component in its own file
// Easier to maintain, optimize, and test
next.config.tstsconfig.jsonsrc/components/DashboardCharts.tsxcreate-dashboard-pageadd-chart