Creating New Components

AI-Assisted Component Creation

1. Create a new component file new-component/index.tsx in the components directory.

2. In Cursor, use screenshots + prompts to let AI assist in generating new component code.

follow this screenshot, create a react function component for me, use shadcn/ui, tailwindcss

3. Import the new component in the page file app/[locale]/default/new-page/page.tsx.

import { LoginForm } from "@/components/new-component";
 
export const runtime = "edge";
 
export default function NewPage() {
  return (
    <div className="container py-36 flex items-center justify-center">
      <LoginForm />
    </div>
  );
}

4. Visit the page route to see the new component in action.

It is recommended to place reusable components in the components/blocks directory, and business components in the components directory.

References

• React Components
• NextJS Client Components and Server Components