React: Biblioteca de Componentes de Interface do Usuário

Última atualização: 2026-08-26

Tom começou do zero a criar o estilo do painel de administração do seu blog. Seis meses depois, o código estava repleto de estilos inline repetitivos style={{}} e nomes de classes CSS escritos manualmente. O desenvolvimento de novos recursos estava ficando lento, e os estilos da interface do usuário eram inconsistentes entre as diferentes páginas. Ele sabia que era hora de adotar uma biblioteca profissional de componentes de interface do usuário, mas, diante de inúmeras opções — como Ant Design, Material UI e Headless UI —, Tom ficou sem saber o que fazer.

1. O que você vai aprender

• Filosofias de design e critérios de seleção para três das principais bibliotecas de componentes de interface do usuário (Ant Design / Material UI / Headless UI)
• Configuração do Ant Design, personalização de temas e internacionalização
• Uma solução de personalização para componentes sem estilo utilizando Headless UI e Tailwind CSS
• Carregamento sob demanda de bibliotecas de componentes e “tree shaking” para otimização de desempenho
• A melhor maneira de integrar uma biblioteca de componentes ao Next.js (importação dinâmica, limites dos componentes do cliente)
• Soluções para personalização de temas e configuração de internacionalização (ConfigProvider, ThemeProvider)
• Otimização do desempenho da biblioteca de componentes: importações dinâmicas, tree shaking, optimizePackageImports
• Estratégias e gerenciamento de limites para a combinação de várias bibliotecas de componentes

2. Diagramas conceituais

Tom descreveu o processo de tomada de decisão para a seleção de uma biblioteca de componentes de interface do usuário: com base em três fatores — tipo de projeto, experiência da equipe e necessidades de personalização —, ele escolheu a solução de biblioteca de componentes mais adequada. Diferentes tipos de bibliotecas de componentes apresentam suas próprias vantagens e limitações em diversos cenários.

A árvore de decisão se ramifica inicialmente por tipo de projeto: projetos de back-end e camada intermediária priorizam a integridade dos componentes, enquanto projetos de front-end priorizam os efeitos visuais e as diretrizes de design. A experiência da equipe influencia diretamente a curva de aprendizado e a eficiência do desenvolvimento: equipes que trabalham com React se adaptam mais rapidamente ao Ant Design, enquanto equipes orientadas a design acham mais fácil usar o Material UI em conjunto com as diretrizes de design do Figma. O ponto de decisão final é o carregamento sob demanda e a otimização de desempenho — independentemente da biblioteca escolhida, é necessário definir uma configuração adequada de carregamento sob demanda ao integrá-la ao Next.js.

flowchart TD
    A[Select UI Component Library] --> B{Project Type?}
    B -->|Backend Management/Enterprise Applications| C[Ant Design<br/>Comprehensive enterprise-level components]
    B -->|Consumer-Facing Front End| D[Material UI<br/>Modern Visual Style]
    B -->|Highly Customized Requirements| E[Headless UI<br/>No style + Customizable]
    C --> F{Team Background?}
    D --> F
    E --> F
    F -->|React Team| G[Ant Design<br/>React Best Ecology]
    F -->|Designer-led| H[Material UI<br/>Mature design specifications]
    F -->|Fully Customizable Design| I[Headless UI<br/>Full Control Over Styles]
    G --> J[Integrated into Next.js]
    H --> J
    I --> J
    J --> K[Load on Demand Tree Shaking]
    K --> L[Theme Customization]
    L --> M[Performance Optimization]

flowchart TD
    A[Select UI Component Library] --> B{Project Type?}
    B -->|Backend Management/Enterprise Applications| C[Ant Design<br/>Comprehensive enterprise-level components]
    B -->|Consumer-Facing Front End| D[Material UI<br/>Modern Visual Style]
    B -->|Highly Customized Requirements| E[Headless UI<br/>No style + Customizable]
    C --> F{Team Background?}
    D --> F
    E --> F
    F -->|React Team| G[Ant Design<br/>React Best Ecology]
    F -->|Designer-led| H[Material UI<br/>Mature design specifications]
    F -->|Fully Customizable Design| I[Headless UI<br/>Full Control Over Styles]
    G --> J[Integrated into Next.js]
    H --> J
    I --> J
    J --> K[Load on Demand Tree Shaking]
    K --> L[Theme Customization]
    L --> M[Performance Optimization]

3. Um cenário da vida real

O painel de administração do Tom foi inicialmente projetado inteiramente à mão. Seis meses depois, o projeto havia crescido para mais de 30 páginas, cada uma com seu próprio arquivo CSS. Os estilos dos botões eram inconsistentes, os componentes das tabelas careciam de funcionalidade e ele havia implementado o seletor de data do zero por três vezes. Ele passou uma semana pesquisando as principais bibliotecas de componentes de interface do usuário.

No fim das contas, Tom escolheu o Ant Design por três motivos: primeiro, o Ant Design oferece o conjunto mais abrangente de componentes — componentes de nível empresarial, como tabelas, formulários e seletores de data, estão prontos para uso assim que instalados; segundo, ele suporta carregamento sob demanda e “tree shaking”, de modo que não sobrecarrega o projeto; terceiro, a integração com o Next.js já está bem estabelecida, e a comunidade conta com uma grande variedade de exemplos práticos. Ele também utilizou o Headless UI para personalizar alguns componentes especiais que não estavam disponíveis no Ant Design.

O processo de seleção do Tom é muito esclarecedor: primeiro, ele passou uma semana integrando três bibliotecas a um projeto de teste e as avaliou com base em três critérios — eficiência de desenvolvimento, impacto no desempenho e curva de aprendizado. O Ant Design se destacou em todos os aspectos em um cenário de backend corporativo. Essa abordagem de “testar primeiro, depois decidir” também pode ser aplicada ao seu próprio processo de seleção de projetos.

(1) Comparação das opções de bibliotecas de componentes

Ao selecionar uma biblioteca de componentes de interface do usuário, você deve levar em consideração três fatores principais: abrangência dos componentes (se ela atende às suas necessidades de negócios), flexibilidade de personalização (se ela atende aos requisitos dos designers) e impacto no desempenho (se ela retarda o carregamento da primeira tela).

A Ant Design (antd) é a biblioteca de interface do usuário (UI) para React mais popular na China, disponibilizada como código aberto pela Ant Financial. Sua linguagem de design é voltada para aplicativos de back-end e camada intermediária de nível empresarial, oferecendo um conjunto completo de componentes que vão desde botões e tabelas até seletores de data e controles em árvore. A lógica de interação entre os componentes foi exaustivamente testada, tornando-os prontos para uso em cenários complexos — como paginação, classificação e sincronização de filtros em tabelas de dados.

O Material UI (MUI) é uma implementação em React das diretrizes do Material Design do Google. Seus pontos fortes residem em suas diretrizes de design maduras, no estilo visual moderno e no sistema de temas robusto. É ideal para aplicativos front-end voltados para o consumidor e equipes lideradas por designers.

A interface de usuário “headless” difere das duas categorias acima — ela não oferece estilos predefinidos, mas apenas fornece a lógica comportamental (acessibilidade, navegação por teclado, gerenciamento de foco). Os desenvolvedores são inteiramente responsáveis por implementar eles mesmos o estilo, utilizando Tailwind CSS ou CSS Modules. Ela é adequada para projetos que exigem um estilo visual altamente personalizado.

▶ Exemplo 1: Comparação entre implementações de botões em diferentes bibliotecas de componentes

// === Ant Design button ===
// Ready to Use Out of the Box，Built-in Styles，Through type Switch Visual Styles by Attribute
import { Button, Space } from 'antd'

function AntDButtons() {
  return (
    <Space wrap>
      <Button type="primary">Main Buttons</Button>
      <Button>Default Button</Button>
      <Button type="dashed">Dotted-line button</Button>
      <Button type="link">Link Button</Button>
      <Button type="primary" danger>Danger Button</Button>
      <Button loading>Loading...</Button>
      <Button type="primary" icon={<SearchOutlined />}>Search</Button>
    </Space>
  )
}

// === Material UI Button ===
// Through variant and  color Combining Properties to Achieve Different Styles
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import SaveIcon from '@mui/icons-material/Save'

function MUIButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="contained">Fill Button</Button>
      <Button variant="outlined">Outline Button</Button>
      <Button variant="text">Text Button</Button>
      <Button variant="contained" color="error">Danger</Button>
      <Button variant="contained" disabled>Disable</Button>
      <Button variant="contained" startIcon={<SaveIcon />}>Save</Button>
    </Stack>
  )
}

// === Headless UI + Tailwind ===
// Unstyled Components + Custom Class
import { Button as HeadlessButton } from '@headlessui/react'

function HeadlessButtons() {
  return (
    <div className="flex gap-2">
      <HeadlessButton className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500 data-[active]:bg-blue-700">
        Main Buttons
      </HeadlessButton>
      <HeadlessButton className="rounded border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50">
        Default Button
      </HeadlessButton>
      <HeadlessButton className="rounded bg-red-600 px-4 py-2 text-white hover:bg-red-500">
        Danger Button
      </HeadlessButton>
    </div>
  )
}

(2) Integração do Ant Design com o Next.js

Ao integrar o Ant Design ao Next.js, é preciso abordar várias questões importantes: compatibilidade com CSS-in-JS, carregamento sob demanda e limites dos componentes do cliente. O Ant Design v5 utiliza a abordagem CSS-in-JS (cssinjs), o que requer uma configuração no Next.js para garantir que os estilos sejam injetados corretamente.

Para otimizar o desempenho, os componentes devem utilizar importações dinâmicas (dynamic) para carregamento sob demanda, a fim de evitar que toda a biblioteca de componentes seja incluída no JavaScript “above-the-fold”. O Tree Shaking do Ant Design é ativado automaticamente ao compilar com ES Modules — basta importar diretamente de antd; não é necessária nenhuma configuração do babel-plugin-import.

▶ Exemplo 2: Integração completa do Ant Design com o Next.js

// app/providers.tsx - Ant Design Themes and Configuration Provider
'use client'
import { useState } from 'react'
import { ConfigProvider, theme, App } from 'antd'
import zhCN from 'antd/locale/zh_CN'

export function AntdProvider({ children }: { children: React.ReactNode }) {
  const [isDark] = useState(false)

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        // Switch to Light Mode/Dark Theme
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        // Custom Theme Colors
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
          colorBgContainer: isDark ? '#141414' : '#ffffff',
        },
      }}
    >
      <App>{children}</App>
    </ConfigProvider>
  )
}

// app/layout.tsx - Global Import AntdProvider
import { AntdProvider } from './providers'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh">
      <body>
        <AntdProvider>{children}</AntdProvider>
      </body>
    </html>
  )
}

// app/dashboard/page.tsx - Use dynamic import to load on demand Ant Design Components
// Avoid putting the entire antd Pack into the first screen JS in 
import dynamic from 'next/dynamic'

// Dynamic Import（Load only when needed）
const DataTable = dynamic(() => import('@/components/DataTable'), {
  loading: () => <div>Loading the table......</div>,
})

const DatePicker = dynamic(() => import('antd').then(mod => mod.DatePicker), {
  loading: () => <div>Loading the date picker......</div>,
})

async function DashboardPage() {
  // Analog Data Acquisition
  const data = await fetch('https://api.example.com/table-data').then(r => r.json())

  return (
    <div style={{ padding: 24 }}>
      <h1>Management Dashboard</h1>
      <div style={{ marginBottom: 16 }}>
        <DatePicker />
      </div>
      <DataTable data={data} />
    </div>
  )
}
export default DashboardPage

// components/DataTable.tsx - Complete Table Component
'use client'
import { Table, Tag, Space, Button, Popconfirm } from 'antd'
import type { ColumnsType } from 'antd/es/table'

interface UserData {
  key: number
  name: string
  age: number
  address: string
  status: 'active' | 'inactive'
}

function DataTable({ data }: { data: UserData[] }) {
  const columns: ColumnsType<UserData> = [
    { title: 'Name', dataIndex: 'name', key: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
    { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age },
    { title: 'Address', dataIndex: 'address', key: 'address' },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? 'Enable' : 'Disable'}
        </Tag>
      ),
    },
    {
      title: 'Operation',
      key: 'action',
      render: (_: any, record: UserData) => (
        <Space>
          <Button type="link" onClick={() => console.log('Edit', record.key)}>Edit</Button>
          <Popconfirm title="Confirm Deletion？" onConfirm={() => console.log('Delete', record.key)}>
            <Button type="link" danger>Delete</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 10, showSizeChanger: true, showTotal: (total) => `Total ${total} items` }}
      bordered
      size="middle"
    />
  )
}
export default DataTable

(3) Interface de usuário sem cabeçalho + personalização com Tailwind CSS

A interface de usuário “headless” oferece uma abordagem totalmente diferente em relação às bibliotecas de componentes: componentes sem estilo. Ela expõe a lógica comportamental (como fechar uma caixa de diálogo aberta pressionando a tecla Escape, a navegação por teclado em caixas de seleção e o gerenciamento de animações para transições), deixando o estilo inteiramente a cargo do desenvolvedor. Isso significa que sua interface de usuário pode corresponder perfeitamente aos protótipos de design sem a necessidade de substituir os estilos padrão de terceiros.

Tom se deparou com algumas situações que o Ant Design não abrangia: um painel de filtro personalizado que exigia interações específicas e uma caixa suspensa de sugestões para resultados de pesquisa que precisava de um estilo especial. Esses recursos podem ser implementados com muita flexibilidade usando o Headless UI. Combinado com as classes utilitárias do Tailwind CSS, é possível criar uma interface de usuário que corresponda aos mockups de design sem escrever uma única linha de CSS personalizado.

▶ Exemplo 3: Componentes personalizados de interface do usuário sem interface gráfica

// components/SearchCombobox.tsx
// Usage Headless UI 's  Combobox Implementing a search suggestion drop-down menu
'use client'
import { useState } from 'react'
import {
  Combobox,
  ComboboxInput,
  ComboboxButton,
  ComboboxOptions,
  ComboboxOption,
  Transition,
} from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'

const people = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'Editor' },
  { id: 3, name: 'Charlie', role: 'Author' },
  { id: 4, name: 'Diana', role: 'Reader' },
  { id: 5, name: 'Eve', role: 'Admin' },
]

function SearchCombobox() {
  const [selected, setSelected] = useState(people[0])
  const [query, setQuery] = useState('')

  const filtered = query === ''
    ? people
    : people.filter((person) =>
        person.name.toLowerCase().includes(query.toLowerCase())
      )

  return (
    <div className="w-72">
      <Combobox value={selected} onChange={setSelected}>
        <div className="relative">
          <ComboboxInput
            className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            displayValue={(person: any) => person?.name}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search Users..."
          />
          <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2">
            <ChevronDownIcon className="h-5 w-5 text-gray-400" />
          </ComboboxButton>
        </div>

        <Transition
          enter="transition duration-100 ease-out"
          enterFrom="transform scale-95 opacity-0"
          enterTo="transform scale-100 opacity-100"
          leave="transition duration-75 ease-out"
          leaveFrom="transform scale-100 opacity-100"
          leaveTo="transform scale-95 opacity-0"
        >
          <ComboboxOptions className="absolute z-10 mt-1 max-h-60 w-72 overflow-auto rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5">
            {filtered.length === 0 && query !== '' ? (
              <div className="px-3 py-2 text-sm text-gray-500">No matching results found</div>
            ) : (
              filtered.map((person) => (
                <ComboboxOption
                  key={person.id}
                  value={person}
                  className="cursor-pointer px-3 py-2 text-sm data-[focus]:bg-blue-100 data-[selected]:bg-blue-50"
                >
                  {({ selected }) => (
                    <div className="flex justify-between">
                      <span className={selected ? 'font-medium' : ''}>{person.name}</span>
                      <span className="text-gray-400">{person.role}</span>
                    </div>
                  )}
                </ComboboxOption>
              ))
            )}
          </ComboboxOptions>
        </Transition>
      </Combobox>

      {selected && (
        <p className="mt-2 text-sm text-gray-600">
          Selected：{selected.name}（{selected.role}）
        </p>
      )}
    </div>
  )
}
export default SearchCombobox

▶ Exemplo 4: Configuração de otimização de desempenho no arquivo next.config.ts

// next.config.ts - Performance Optimization Configuration for the Component Library
import type { NextConfig } from 'next'

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const nextConfig: NextConfig = withBundleAnalyzer({
  optimizePackageImports: [
    'antd',
    '@ant-design/icons',
    '@mui/material',
    '@mui/icons-material',
    '@headlessui/react',
  ],
  transpilePackages: ['antd'],
  experimental: {
    optimizeCss: true,
  },
})

export default nextConfig

// package.json scripts:
// "analyze": "ANALYZE=true next build"
// "analyze:server": "ANALYZE=true BUNDLE_ANALYZE=server next build"
// "analyze:browser": "ANALYZE=true BUNDLE_ANALYZE=browser next build"

▶ Exemplo 5: Estratégias para combinar e integrar várias bibliotecas de componentes

// components/HybridTable.tsx - Ant Design Table + Headless UI Custom Filters
'use client'
import { useState } from 'react'
import { Table, Tag } from 'antd'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import type { ColumnsType } from 'antd/es/table'

interface Product {
  key: string
  name: string
  price: number
  category: string
  status: 'in_stock' | 'out_of_stock'
}

const products: Product[] = [
  { key: '1', name: 'Laptop', price: 999, category: 'Electronics', status: 'in_stock' },
  { key: '2', name: 'Desk Chair', price: 299, category: 'Furniture', status: 'out_of_stock' },
  { key: '3', name: 'Coffee Maker', price: 79, category: 'Kitchen', status: 'in_stock' },
]

function HybridTable() {
  const [categoryFilter, setCategoryFilter] = useState<string>('all')

  const filtered = categoryFilter === 'all'
    ? products
    : products.filter(p => p.category === categoryFilter)

  const columns: ColumnsType<Product> = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Price', dataIndex: 'price', key: 'price', render: (v: number) => `$${v}` },
    { title: 'Category', dataIndex: 'category', key: 'category' },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (s: string) => (
        <Tag color={s === 'in_stock' ? 'green' : 'red'}>
          {s === 'in_stock' ? 'In Stock' : 'Out of Stock'}
        </Tag>
      ),
    },
  ]

  return (
    <div>
      <div className="mb-4 flex items-center gap-2">
        <Popover className="relative">
          <PopoverButton className="rounded border px-3 py-1.5 text-sm">
            Filter: {categoryFilter === 'all' ? 'All' : categoryFilter}
          </PopoverButton>
          <PopoverPanel className="absolute z-10 mt-1 w-40 rounded bg-white py-1 shadow-lg">
            {['all', 'Electronics', 'Furniture', 'Kitchen'].map(cat => (
              <button
                key={cat}
                className="block w-full px-3 py-1.5 text-left text-sm hover:bg-blue-50"
                onClick={() => setCategoryFilter(cat)}
              >
                {cat === 'all' ? 'All Categories' : cat}
              </button>
            ))}
          </PopoverPanel>
        </Popover>
      </div>
      <Table columns={columns} dataSource={filtered} pagination={false} size="small" />
    </div>
  )
}
export default HybridTable

❓ Perguntas Frequentes

P: Como escolher entre Ant Design, Material UI e Headless UI? R: Três princípios para a escolha: leve em consideração o tipo de projeto — use o Ant Design para back-ends corporativos e o Material UI para aplicativos voltados ao consumidor; considere as necessidades de personalização — use o Headless UI + Tailwind para altos níveis de personalização; e leve em conta a experiência da equipe — equipes que trabalham com React tendem a achar o Ant Design mais intuitivo. Você também pode usar uma abordagem híbrida: use o Ant Design como biblioteca de componentes base e o Headless UI para complementar com componentes personalizados.

P: O que devo levar em consideração ao usar o Ant Design no Next.js? R: Há três pontos importantes a serem observados: primeiro, os componentes do Ant Design devem ser usados dentro de Componentes do Cliente (com 'use client'); eles não podem ser usados diretamente em componentes de servidor; segundo, use dynamic para importar componentes dinamicamente, a fim de evitar incluir toda a biblioteca antd no JavaScript acima da dobra; terceiro, configure temas e internacionalização em ConfigProvider para garantir a consistência global do estilo. O Ant Design v5 não requer mais babel-plugin-import, pois o Tree Shaking é ativado automaticamente.

P: Uma biblioteca de componentes pode tornar um projeto pesado? R: Certamente sim, se for usada de forma inadequada. Métodos de otimização: use dynamic para carregar componentes sob demanda (dynamic(() => import('antd').then(m => m.Button))); configure optimizePackageImports do next.config.ts; importe apenas os componentes necessários (import { Button } from 'antd' em vez de importar tudo); analise o tamanho do pacote (@next/bundle-analyzer) para identificar dependências anormais. Após a otimização, o impacto da integração do Ant Design no JavaScript da primeira tela normalmente não ultrapassa 30 KB.

P: Ao personalizar componentes, devo modificar o tema da biblioteca de componentes ou escrever meu próprio CSS? R: Priorize a modificação do tema da biblioteca de componentes — tanto o ConfigProvider do Ant Design quanto o ThemeProvider do Material UI oferecem sistemas de temas abrangentes que permitem substituir tokens como cores, espaçamento, cantos arredondados e fontes. Use CSS Modules ou Tailwind para complementar estilos que o sistema de temas da biblioteca de componentes não consiga abranger. Evite usar !important para substituir estilos da biblioteca de componentes — você deve fazer isso usando tokens de tema ou substituindo variáveis CSS.

P: Quais são as diferenças entre o Ant Design v4 e o v5? R: A maior mudança no Ant Design v5 é a migração do Less para a abordagem CSS-in-JS (cssinjs), eliminando a necessidade do compilador Less e do babel-plugin-import. Além disso, a v5 introduz o componente App (que gerencia centralmente métodos estáticos como message, notification e modal), o objeto theme (para personalização detalhada de tokens) e suporte aprimorado ao SSR. As definições de tipos do TypeScript na v5 também estão mais abrangentes. Se você estiver atualizando da v4, preste atenção à compatibilidade com CSS-in-JS e às alterações na API de temas.

📖 Resumo

• O Ant Design é adequado para sistemas de back-end e middleware de nível empresarial; oferece um conjunto abrangente de componentes, o melhor ecossistema React e soluções de integração maduras para o Next.js.
• O Material UI foi desenvolvido para aplicativos voltados ao consumidor e conta com um sistema de design maduro, um sistema de temas robusto e um estilo visual moderno
• A interface de usuário “headless” oferece componentes comportamentais sem estilo, tornando-a adequada para projetos altamente personalizados; ela costuma ser usada em conjunto com o Tailwind CSS
• Melhores práticas para o Ant Design no Next.js: 'use client' Declaração + dynamic Importação dinâmica + ConfigProvider Configuração do tema
• O Tree Shaking funciona automaticamente com os ES Modules; não é necessária nenhuma configuração adicional do babel-plugin-import.
• A otimização next.config.ts para optimizePackageImports pode reduzir o tamanho do pacote da biblioteca de componentes
• Três fatores-chave para a seleção de uma biblioteca de componentes: tipo de projeto (back-end/front-end), requisitos de personalização (padrão/altamente personalizado) e perfil da equipe (React/orientada ao design)
• É possível usar várias bibliotecas de componentes em conjunto: o Ant Design oferece componentes padrão, enquanto o Headless UI os complementa com componentes personalizados
• O Ant Design v5 utiliza uma abordagem CSS-in-JS; portanto, o compilador Less e o babel-plugin-import não são mais necessários.
• optimizePackageImports Configurar as opções para otimizar o tamanho do pacote da biblioteca de componentes e reduzir a quantidade de JavaScript carregada na primeira tela
• O componente “Transition” do Headless UI, quando usado com o Tailwind, permite criar animações suaves de entrada e saída.
• Ao selecionar uma biblioteca de componentes, ela deve primeiro ser testada em um projeto piloto e avaliada com base em três critérios: eficiência no desenvolvimento, impacto no desempenho e curva de aprendizado.
• Esta aula aborda os fundamentos da interface do usuário do projeto integrado (SaaS Kanban) que será abordado na próxima aula.

📝 Exercícios

1. Integrar o Ant Design à interface administrativa do blog: crie um tema providers.tsx configurado para o Ant Design e para a internacionalização (definido para chinês) e incorpore-o ao layout global AntdProvider. Use componentes como Button, Table, Tag e Space para redesenhar a página de gerenciamento de usuários do blog na interface de administração.
2. Use o componente Combobox do Headless UI + Tailwind CSS para implementar um seletor de busca de usuários: recupere uma lista de usuários da API, ofereça suporte à busca por palavra-chave e à filtragem e exiba as informações do usuário quando ele for selecionado. Compare isso com o componente Select do Ant Design para perceber o nível de flexibilidade de personalização oferecido pelo Headless UI.
3. Otimize o desempenho da biblioteca de componentes para o projeto: use @next/bundle-analyzer para analisar as mudanças no tamanho do pacote antes e depois da integração do Ant Design. Mude pelo menos três componentes grandes (DatePicker, Table, TreeSelect) para carregamento dinâmico usando dynamic. Adicione optimizePackageImports: ['antd', '@ant-design/icons'] a next.config.ts e compare o tamanho do JavaScript na primeira tela e as pontuações de desempenho do Lighthouse antes e depois da otimização.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós