Create 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 and prompts to let AI assist in generating new component code.
Prompt
1follow this screenshot, create a react function component for me, use shadcn/ui, tailwindcss

Import the New Component in the Page File
3. Import the new component in the page file app/[locale]/new-page/page.tsx.
app/[locale]/new-page/page.tsx
1"use client";
2
3import React from "react";
4import { PerplexitySearch } from "@/components/new-component";
5
6export default function PerplexityDemoPage() {
7 return (
8 <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
9 <div className="flex items-center justify-center min-h-screen px-4">
10 <div className="w-full max-w-4xl">
11 <PerplexitySearch
12 />
13 </div>
14 </div>
15 <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2">
16 <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
17 按 Enter 键搜索 • 点击图标使用不同功能
18 </p>
19 </div>
20 </div>
21 );
22}
Access the Page Route to View the New Component Effect
4. Access the page route http://localhost:3000/new-page to view the effect of the new component.

It is recommended to place reusable components in the components/blocks directory, and business components in the components directory.
Reference
NextJS Client Components and Server Components
NextJS Client Components and Server Components Documentation
View Docs →Last updated on January 5, 2025