NextJS 14 GPT Pro (Tailwind CSS)-AI-powered development with NextJS 14.

Example

Provide a fully commented App Router layout with a header, nav, footer, and a server component that fetches product data from an API and renders a responsive grid using Tailwind utilities.

Scenario

A developer needs a reusable product-list page. The assistant returns two variants (JavaScript and TypeScript) including: src/app/layout.tsx, src/app/products/page.tsx (server component using fetch with cache: 'force-cache' or 'no-store' depending on need), and a small client component for add-to-cart interactions. It also highlights where to mark 'use client' and why (for event handlers and state).

Example

Diagnose a Tailwind purge problem where utilities used only in JS template strings are removed; propose safelisting patterns and recommend using the `content` glob patterns and `safelist` in tailwind.config.js alongside examples of dynamic class mapping functions.

Scenario

In production, styles disappear for dynamic variant classes (e.g., `bg-${color}-500`). The assistant explains how PurgeCSS works with Tailwind, offers code for a deterministic classname mapping function, an example safelist, and shows how to add comments to files marking dynamic usages so the build preserves them.

Example

Show a recommended file structure for a medium-sized app using Next.js 14 App Router, including route groups for i18n (/app/(en)/, /app/(fr)/), nested layouts for dashboard vs marketing, and an example of streaming a product list with `export const dynamic = 'force-dynamic'` or `revalidate` settings.

Scenario

A startup needs to design the skeleton for an e-commerce app supporting multiple locales and an admin dashboard. The assistant supplies a layout that isolates admin styles, demonstrates route group usage to share components across localized routes without duplicating markup, and gives an example of server-side streaming for product lists to improve LCP.

Example

Explain and provide examples for ISR (Incremental Static Regeneration) using `revalidate`, server response caching headers, edge caching patterns, and when to prefer `no-store` vs `force-cache` for fetch calls in server components.

Scenario

A team is seeing stale content or heavy origin loads. The assistant produces a checklist: identify frequently-changing endpoints (use `no-store`), cache stable assets (`force-cache` + revalidate), set `Cache-Control` at API layer, and demonstrate `fetch(url, { next: { revalidate: 60 } })` usage in a server component.

Example

Provide a production-ready tailwind.config.js tuned for performance: JIT mode enabled (default), a `content` array with recommended globs, example `safelist` entries, custom theme tokens, plugin usage (forms, typography), and instructions to trim unused base styles.

Scenario

An app has a large CSS bundle and long build times. The assistant suggests reducing the scanned paths, enabling `preserveHtmlElements` where needed, using `@layer` for component styles, and creating design tokens (colors, spacing) in the theme to avoid repetitive class combos and help with tree-shaking.

Example

Step-by-step migration plan from Pages Router to App Router with example conversions for dynamic routes, API usage differences, and handling of middleware and edge functions. Provide small incremental PR templates and test checklist.

Scenario

A codebase with hundreds of pages must adopt App Router features incrementally. The assistant suggests converting low-risk routes first (marketing pages), setting up feature flags, creating shared components compatible with both routers, and using route groups to replicate legacy behavior during the transition.

Example

Provide examples for integrating accessibility checks (axe-core, jest-axe), unit/end-to-end testing with React Testing Library + Playwright, and a sample GitHub Actions workflow for linting, testing, and preview deployments.

Scenario

A team needs to tighten QA. The assistant supplies a Playwright config for parallel tests, example tests for SSR hydration, ARIA recommendations for dynamic menus, and a CI pipeline snippet that runs typechecking, ESLint, Tailwind purge checks, and Playwright tests before merging.