Step 1: Project Setup
If you don't have a Next.js project yet, run this command:
Bash
# Creates a new Next.js project with TypeScript and App Router npx create-next-app@latest my-xyflow-app --ts --app cd my-xyflow-app 📦 Step 2: Install xyflow
Install the @xyflow/react package and its required types:
Bash
npm install @xyflow/react # or yarn add @xyflow/react # or pnpm install @xyflow/react 🎨 Step 3: Add Global Styles
Import the essential CSS styles for xyflow into your Root Layout file (app/layout.tsx).
In app/layout.tsx:
TypeScript
import './globals.css'; import '@xyflow/react/dist/style.css'; // 👈 Add this line for core styles export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); } 💻 Step 4: Create the Flow Component (Client Component)
Because xyflow uses hooks and handles interactive state (dragging, zooming), it must be a Client Component in Next.js. Create a new file: app/components/BasicFlow.tsx.
app/components/BasicFlow.tsx
TypeScript
'use client'; // 👈 Essential: Marks this file as a Client Component import React, { useCallback } from 'react'; import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, Connection, Edge, Node, } from '@xyflow/react'; // --- Flow Data Definitions (Basic Example) --- const initialNodes: Node[] = [ { id: '1', position: { x: 50, y: 0 }, data: { label: 'Start Application' }, type: 'input' }, { id: '2', position: { x: 50, y: 120 }, data: { label: 'Process Data' } }, { id: '3', position: { x: 250, y: 240 }, data: { label: 'Output Result' }, type: 'output' }, ]; const initialEdges: Edge[] = [ { id: 'e1-2', source: '1', target: '2', label: 'to process', animated: true }, { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'on success' }, ]; // --------------------------------------------- export function BasicFlow() { // Use xyflow hooks to manage state const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); // Connection Handler: Adds a new edge when the user connects two nodes const onConnect = useCallback( (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds)), [setEdges], ); return ( // Set a container size (required for ReactFlow) <div style={{ width: '100%', height: '60vh', border: '2px dashed #9333ea', borderRadius: '4px' }}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView > {/* Helper Components */} <Controls position="top-right" /> <MiniMap nodeColor="#9333ea" /> <Background variant="dots" gap={16} size={1} /> </ReactFlow> </div> ); } 🧩 Step 5: Render the Component
Import and render your new BasicFlow component in your main page file (app/page.tsx).
app/page.tsx
TypeScript
import { BasicFlow } from './components/BasicFlow'; // Import the client component export default function HomePage() { return ( <main style={{ padding: '40px' }}> <h1 style={{ marginBottom: '20px', color: '#1f2937' }}> Next.js Project with xyflow </h1> {/* Render the Client Component */} <BasicFlow /> </main> ); } ▶️ Step 6: Run the App
Start your Next.js development server:
Bash
npm run dev # or yarn dev # or pnpm dev You can now visit http://localhost:3000 to see your interactive flow diagram.
No comments:
Post a Comment