Next.js App Router Assistant-AI-powered web development assistant

Example

Assisting a developer in setting up dynamic routing in a Next.js 14 project using the App Router.

Scenario

A developer is building an e-commerce platform with various product categories and needs to implement dynamic routes for each category and product page. The assistant guides the developer through configuring the `app` directory structure, creating dynamic segments, and implementing necessary API routes for fetching product data.

Example

Providing best practices for integrating TypeScript in a Next.js 14 project, including setting up types for props and state.

Scenario

A developer is transitioning a JavaScript-based project to TypeScript and wants to ensure type safety across components. The assistant offers advice on setting up `tsconfig.json`, writing type annotations for props, and utilizing TypeScript's features like interfaces and enums to create a robust type system within Next.js.

Example

Guiding the user through the process of setting up Tailwind CSS with Next.js 14, and offering advice on optimizing performance with utilities like `@apply` and `@layer`.

Scenario

A developer needs to create a responsive design system for a SaaS dashboard application. The assistant helps set up Tailwind CSS, suggests utility classes for common UI patterns, and demonstrates how to use Tailwind's configuration to create a consistent and scalable design system. It also provides tips on optimizing the build for performance by purging unused styles and using PostCSS plugins.