Fe Nextjs

Same as other FE workers. Generate TypeScript API client from OpenAPI spec.

Step 4 -- Implement following Next.js conventions

Project structure (App Router):

app/
  layout.tsx           -- Root layout (providers, global styles)
  page.tsx             -- Home page
  loading.tsx          -- Loading UI (Suspense boundary)
  error.tsx            -- Error boundary
  not-found.tsx        -- 404 page
  globals.css          -- Global styles
  users/
    page.tsx           -- User list page (Server Component)
    [id]/
      page.tsx         -- User detail page (Server Component)
    new/
      page.tsx         -- Create user page (Client Component)
  api/
    users/
      route.ts         -- Route handler (GET, POST)
      [id]/
        route.ts       -- Route handler (GET, PUT, DELETE)
lib/
  api.ts               -- Typed API client
  actions/
    users.ts           -- Server Actions
  types/               -- Shared TypeScript types
components/
  ui/                  -- Reusable UI components
  forms/               -- Form components

Next.js App Router conventions:

• React Server Components (RSC) by default — no 'use client' unless needed:

  // app/users/page.tsx — Server Component (default)
  export default async function UsersPage() {
    const users = await getUsers()  // Direct async data fetching
    return <UserList users={users} />
  }
  

• 'use client' only for interactive components (forms, state, effects):

  'use client'
  import { useState } from 'react'
  export function SearchBar({ onSearch }: { onSearch: (q: string) => void }) { ... }
  

• Server Actions ('use server') for mutations:

  'use server'
  export async function createUser(formData: FormData) {
    const name = formData.get('name') as string
    await db.users.create({ data: { name } })
    revalidatePath('/users')
  }
  

• loading.tsx for streaming/Suspense boundaries.
• error.tsx for error boundaries ('use client' required).
• generateMetadata() for dynamic SEO metadata:

  export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const user = await getUser(params.id)
    return { title: user.name }
  }
  

• generateStaticParams() for static generation of dynamic routes.
• Route handlers (app/api/.../route.ts) for API endpoints:

  export async function GET(request: Request) {
    const users = await getUsers()
    return Response.json(users)
  }
  

• Middleware (middleware.ts at root) for auth, redirects, headers.
• next/image for optimized images, next/link for navigation.

Data fetching patterns:

• Server Components: fetch() with cache, revalidate, or no-store.
• Client Components: useSWR or @tanstack/react-query for client-side fetching.
• Server Actions: revalidatePath() / revalidateTag() after mutations.
• redirect() from next/navigation for server-side redirects.

TypeScript conventions:

• strict: true in tsconfig.json.
• Props interfaces for all components.
• No any — use unknown and type guards.
• Zod for runtime validation (Server Actions, route handlers).

Styling:

• Tailwind CSS (most common with Next.js) or CSS Modules.
• cn() utility for conditional classes (clsx + tailwind-merge).

Testing:

• Vitest + React Testing Library for component tests.
• @testing-library/user-event for interactions.
• Mock next/navigation (useRouter, usePathname, useSearchParams).
• Test file naming: *.test.tsx or *.spec.tsx.

Step 5 -- Run tests

• Execute: Bash: npm test or Bash: npx vitest run.
• Fix any failures.

Step 6 -- Commit

• Stage and commit: feat(<scope>): <description> [FE-xxx].

Output Format

{
  "files_created": ["app/users/page.tsx", "lib/actions/users.ts"],
  "files_modified": ["app/layout.tsx"],
  "summary": "Implemented Users page with RSC data fetching and Server Action for creation.",
  "test_results": { "total": 6, "passed": 6, "failed": 0, "skipped": 0 }
}

Quality Constraints