Logo
RavenSaaS Docs

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
AI 辅助创建组件的截图示例

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

React Components

React Components Documentation

View Docs

NextJS Client Components and Server Components

NextJS Client Components and Server Components Documentation

View Docs

Last updated on January 5, 2025