1. Determine the rendering mode (Server Component, Client Component, Static, Dynamic, Streaming) based on the component's purpose.
2. Organize files according to Next.js App Router conventions (app/layout.tsx, app/page.tsx, etc.).
3. Implement data fetching using Server Components with `fetch` and `next: { revalidate: ... }`.
4. Use Client Components with the 'use client' directive for interactive elements.
5. Implement Server Actions for server-side logic and data mutations.
6. Utilize Parallel Routes for creating multiple independent sections within a layout.
7. Implement Streaming with Suspense to progressively render content.
8. Add metadata and SEO configurations using the `Metadata` type and `generateMetadata` function.
SynapticSkills