Sử dụng Agentic IDE với dự án Next.js

Với Next.js, Agentic IDE có thể giúp bạn từ việc tạo component, viết API routes, cho đến debug các vấn đề phức tạp như hydration.

1. Viết Document cho Component

Sử dụng JSDoc để mô tả props và chức năng của một React component.

"prompt: Tạo JSDoc cho Component"

Tạo JSDoc cho component UserProfile. Component này nhận một prop là user, một object chứa name và email.

Ví dụ Agentic IDE thực hiện:

import React from 'react';

/**
 * Displays a user's profile information.
 * @param {{user: {name: string, email: string}}} props - The component props.
 * @param {object} props.user - The user object.
 * @param {string} props.user.name - The user's name.
 * @param {string} props.user.email - The user's email.
 */
export default function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

2. Điều tra kiến trúc hệ thống

Nhanh chóng có được cái nhìn tổng quan về cấu trúc của một ứng dụng Next.js.

"prompt: Điều tra kiến trúc hệ thống"

Phân tích dự án Next.js này. Liệt kê các trang trong thư mục pages, các API routes trong pages/api. Vẽ một biểu đồ Mermaid thể hiện cấu trúc component, bắt đầu từ pages/index.js.

Ví dụ Agentic IDE thực hiện:

Pages:

• / (pages/index.js)
• /about (pages/about.js)
• /posts/[slug] (pages/posts/[slug].js)

API Routes:

• /api/user (pages/api/user.js)
• /api/posts (pages/api/posts.js)

Biểu đồ cấu trúc Component:

3. Debug lỗi Hydration

Lỗi Hydration là một trong những lỗi khó chịu nhất trong Next.js. Agentic IDE có thể giúp tìm ra sự khác biệt giữa server-rendered và client-rendered HTML.

"prompt: Debug lỗi Hydration"

Tôi gặp lỗi "Warning: Text content did not match. Server: "...". Client: "..."." khi render trang /posts/my-first-post. Phân tích component PostPage và PostContent để tìm nguyên nhân. Có thể có một đoạn code chỉ chạy trên client (ví dụ: sử dụng window).

Ví dụ Agentic IDE thực hiện:

Phân tích: Lỗi hydration xảy ra khi HTML được render trên server không khớp với HTML được render lần đầu trên client. Nguyên nhân phổ biến là do sử dụng các API chỉ có trên trình duyệt (như window, localStorage) hoặc render nội dung ngẫu nhiên (như Math.random()) mà không qua useEffect.

Agentic IDE sẽ tìm thấy đoạn code sau trong component PostContent:

function PostContent({ post }) {
  // This causes a hydration mismatch because `window.innerWidth`
  // is only available on the client.
  const isMobile = window.innerWidth < 768; 

  return (
    <div>
      <h1>{post.title}</h1>
      {isMobile && <p>Mobile view</p>}
      <div>{post.body}</div>
    </div>
  );
}

Cách sửa đề xuất: Sử dụng useEffect và state để đảm bảo code liên quan đến window chỉ chạy sau khi component đã được mount trên client.

import { useState, useEffect } from 'react';

function PostContent({ post }) {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    setIsMobile(window.innerWidth < 768); 
  }, []);

  return (
    <div>
      <h1>{post.title}</h1>
      {isMobile && <p>Mobile view</p>}
      <div>{post.body}</div>
    </div>
  );
}

4. Phát triển tính năng mới

Yêu cầu Agentic IDE tạo một API route và component để hiển thị danh sách người dùng.

"prompt: Phát triển tính năng hiển thị danh sách"

Tạo tính năng hiển thị danh sách người dùng.

1. Tạo một API route mới tại pages/api/users.js trả về một danh sách người dùng giả.
2. Tạo một trang mới tại pages/users.js.
3. Trang này sẽ fetch dữ liệu từ API route bằng getStaticProps và render danh sách người dùng.

Ví dụ Agentic IDE thực hiện:

1. Tạo pages/api/users.js:

export default function handler(req, res) {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
  ];
  res.status(200).json(users);
}

2. Tạo pages/users.js:

import React from 'react';

export default function UsersPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // In a real app, you'd fetch from an external API.
  // Here, we fetch from our own API route for demonstration.
  const res = await fetch('http://localhost:3000/api/users');
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}