nextjs-developmentlisted
Install: claude install-skill aldiipratama/dyy-plugin
# Next.js Frontend Development Skill
## App Router Layout
Organize pages using route directories containing `layout.tsx`, `page.tsx`, and `loading.tsx`:
```tsx
// app/dashboard/page.tsx
import { Suspense } from 'react';
import Loading from './loading';
export default async function DashboardPage() {
return (
<main>
<h1>Dashboard</h1>
<Suspense fallback={<Loading />}>
{/* Async Server Component fetch */}
</Suspense>
</main>
);
}
```
## Server Components (RSC)
By default, components in `app/` are Server Components. Add `'use client'` only at the top of files that require browser APIs or hooks (e.g. `useState`, `useEffect`).