forge-frontend-nextjs

To stop AI from writing client-side fetching in Next.js, enforce server-first React Server Components by banning useEffect for initial data loads and moving data fetching into async server components with explicit Next fetch cache controls.

The correct way to use async params and searchParams in Next.js 16 is to await them directly inside server components, preventing type errors and runtime issues while ensuring your app-router routes remain server-rendered.

Handle streaming and slow UI loading states with React Server Components by wrapping slow UI in Suspense boundaries and using the loading.tsx, error.tsx, and not-found segment conventions to manage rendering states per route.

Use server actions instead of trivial mutation API routes in Next.js to handle form submissions and data mutations directly on the server, promoting safe return shapes for failures and minimizing the client component surface.

Next.js app router code defaults to 'use client' when generated by AI due to a lack of server-first discipline, which can be fixed by eliminating top-level 'use client' directives and pushing client boundaries as deep as possible.

Yes, you can use Tailwind 4 with server actions and React Server Components by keeping styling on the server and ensuring mutations are handled via server actions without expanding the client component surface.